JavaRush /Java Blog /Random-ID /Membuat proyek web sederhana di IntelliJ Idea Enterprise....
Стас Пасинков
Level 26
Киев

Membuat proyek web sederhana di IntelliJ Idea Enterprise. Langkah demi langkah, dengan gambar

Dipublikasikan di grup Random-ID
Tingkat pengetahuan yang diperlukan untuk memahami artikel: Anda kurang lebih telah memahami Java Core dan ingin melihat teknologi JavaEE dan pemrograman web. Paling masuk akal jika Anda sedang mempelajari misi Koleksi Java, yang mencakup topik yang dekat dengan artikel. Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 1Saat ini saya menggunakan IntelliJ IDEA Enterprise Edition (ini adalah IDE versi lanjutan berbayar, biasanya digunakan dalam pengembangan profesional - catatan editor ). Jauh lebih mudah untuk bekerja dengan proyek web daripada Edisi Komunitas gratis. Jadi, dalam Edisi Perusahaan, secara harfiah dengan satu klik mouse, proyek dirakit, dituangkan ke dalam wadah servlet, server dimulai, dan bahkan halaman dengan proyek yang sedang berjalan terbuka di browser. Dalam versi gratis dari gagasan ini, sebagian besar dari hal ini harus dilakukan secara mandiri, sehingga dapat dikatakan, “dengan tangan.” Saya menggunakan Apache Maven untuk membangun proyek dan mengelola siklus hidupnya. Dalam hal ini saya hanya menggunakan sebagian kecil dari kemampuannya (manajemen paket/ketergantungan). Saya memilih Apache Tomcat versi 9.0.0.M4 sebagai wadah servlet/server Aplikasi. Saya tahu sudah ada versi yang lebih baru, tapi ini adalah versi yang sudah saya instal.

Mari kita mulai

Pertama, buka IntelliJ IDEA dan buat proyek Maven kosong.
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 2
Di sini di sebelah kiri kita pilih Maven, periksa apakah JDK untuk proyek tersebut ditunjukkan di atas. Jika tidak ada, pilih yang Anda perlukan dari daftar, atau klik Baru... dan pilih langsung dari komputer Anda. Di tengah jendela saya memiliki animasi memuat daftar arketipe. Kami tidak memerlukannya, jadi tanpa menunggu pengunduhan, silakan klik Berikutnya di bagian bawah jendela.
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 3
Di jendela ini Anda perlu menentukan GroupId dan ArtifactId . GroupId mengacu pada pengidentifikasi unik perusahaan yang memproduksi proyek. Merupakan praktik umum untuk menggunakan nama domain perusahaan, tetapi dalam urutan terbalik. Bukan dalam arti cermin, tetapi jika, misalnya, nama domain suatu perusahaan adalah maven.apache.org , maka GroupId-nya adalah org.apache.maven . Artinya, pertama kita tulis domain level pertama, pisahkan dengan titik, tulis nama domain level kedua, dan seterusnya. Ini adalah pendekatan yang diterima secara umum. Jika Anda “memotong” proyek Anda sendiri, dan bukan sebagai bagian dari perusahaan, tulis nama domain pribadi Anda di sini (juga dalam urutan terbalik!). Jika Anda memilikinya, tentu saja :). Jika tidak, jangan marah. Sebenarnya, Anda bisa menulis apa saja di sini .
Untuk perusahaan dengan nama domain vasya.pupkin.org, GroupIdnya adalah org.pupkin.vasya. Pendekatan penamaan ini diperlukan untuk memisahkan proyek dengan nama yang sama, tetapi dirilis oleh perusahaan yang berbeda.
Dalam contoh ini, saya akan menggunakan nama domain fiktif fatfaggy.info.javarush.ru . Oleh karena itu, saya memasukkan ru.javarush.info.fatfaggy di bidang GroupId . ArtefactId hanyalah nama proyek kami. Anda dapat menggunakan huruf dan beberapa simbol (tanda hubung, misalnya) untuk memisahkan kata. “Artefak” kita akan diberi nama persis seperti yang kita tulis di sini. Dalam contoh ini, saya menulis my-super-project . Kami tidak menyentuh bidang versi untuk saat ini, kami membiarkannya apa adanya.
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 4
Nah, jendela IDEA standar saat membuat proyek baru. Sebut saja proyek super saya menurut tradisi .
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 5
Proyek telah dibuat!
File pom.xml langsung terbuka di depan kita. Ini adalah file dengan pengaturan Maven. Jika kami ingin "memberi tahu" Maven apa dan bagaimana melakukannya atau dari mana mendapatkan sesuatu, kami menjelaskan semua ini di file pom.xml ini. Itu terletak di akar proyek.
Kami melihat bahwa sekarang berisi data persis yang kami masukkan saat membuat proyek Maven: groupId , artifakId dan versi (kami tidak menyentuh yang terakhir).

Struktur proyek kami

Proyek Maven ini memiliki struktur tertentu.
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 6
Seperti yang bisa kita lihat, pada dasarnya kebohongan:
  • direktori .idea , yang berisi pengaturan ide untuk proyek saat ini;
  • direktori src tempat kita membuat sumber;
  • file my-super-project.iml , file proyek yang dibuat oleh IDEA;
  • file pom.xml , file proyek Maven yang sama yang saya bicarakan di atas, yang sekarang telah kita buka. Jika saya menyebutkan pom.xml atau “pom” di suatu tempat, yang saya maksud adalah file khusus ini.
Folder src pada gilirannya berisi dua subfolder:
  • main - untuk kode kita;
  • test - untuk pengujian kode kita.
Baik main dan test memiliki folder java . Anggaplah ini adalah folder yang sama, hanya folder di main yang berisi kode sumber, dan folder di test masing-masing untuk kode pengujian. Kami tidak memerlukan folder sumber daya sama sekali untuk saat ini, kami tidak akan menggunakannya. Tapi biarkan dia berbaring.

Berubah menjadi proyek web

Sudah waktunya bagi kita untuk mengubah proyek Maven menjadi proyek web. Untuk melakukannya, klik kanan pada nama proyek di pohon ini dan pilih Tambahkan dukungan kerangka kerja...
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 7
Sebuah jendela akan terbuka di mana kita dapat menambahkan dukungan untuk semua jenis kerangka kerja berbeda untuk proyek kita. Tapi kita hanya membutuhkan satu: Aplikasi Web . Kami memilih dia.
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 8
Kami memeriksa apakah ada tanda centang di sebelah Aplikasi Web , dan di bagian utama jendela disebutkan bahwa kami ingin file web.xml segera dibuat untuk kami (saya sarankan mencentang kotak jika tidak ada). Setelah ini, kita akan melihat bahwa struktur proyek kita telah dilengkapi dengan folder web .
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 9
Ini adalah akar dari proyek web kami di / . Artinya, jika kita memasukkan alamat localhost di browser (tentu saja saat kita meluncurkannya), maka alamat tersebut akan diakses tepat di sini, ke root proyek web. Jika kita memasukkan localhost/addUser , maka folder web akan mencari resource bernama addUser .
Hal utama adalah memahami bahwa folder web adalah root dari proyek kita ketika kita mengunggahnya ke Tomcat. Sekarang kita memiliki struktur folder tertentu, tetapi pada proyek selesai yang akan kita unggah, akan sedikit berbeda, dan folder web akan menjadi root di sana.
Di web ada folder wajib bernama WEB-INF , tempat file web.xml berada , yang kami minta untuk dibuat pada langkah sebelumnya. Mari kita buka.
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 10
Seperti yang Anda lihat, belum ada yang menarik di dalamnya, hanya “topinya”. Ngomong-ngomong, jika kami tidak meminta untuk membuatnya, kami mungkin harus membuatnya secara manual, yaitu mengetik seluruh “header” ini dengan tangan, atau, dalam kasus ekstrim, mencari versi yang sudah jadi di Internet . Untuk apa web.xml ? Untuk pemetaan. Di sini kami akan memberi tahu Tomcat permintaan URL mana yang akan dikirim ke servlet mana. Tapi itu saja nanti, untuk saat ini kita biarkan kosong. Ada juga file index.jsp di folder web . Mari kita buka.
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 11
Ini adalah file yang akan dieksekusi secara default. Artinya, saat kami meluncurkan proyek, inilah yang akan kami lihat. Intinya jsp adalah file html biasa, bedanya Anda bisa mengeksekusi kode java di dalamnya.

Sedikit tentang konten statis dan dinamis

Konten statis adalah konten yang tidak berubah seiring waktu. Segala sesuatu yang kami tulis di file html akan ditampilkan tanpa perubahan. Jika kita menulis hello world, maka tulisan ini akan ditampilkan segera setelah kita membuka halaman tersebut, dan dalam 5 menit, dan besok, dan dalam seminggu, dan dalam setahun. Dia tidak akan berubah. Namun bagaimana jika kita ingin menampilkan tanggal saat ini pada halaman tersebut? Jika kita hanya menulis “27 Oktober 2017”, maka besok kita akan melihat tanggal yang sama, dan dalam seminggu, dan dalam setahun. Tapi saya ingin tanggal ini tetap relevan. Di sinilah kemampuan untuk mengeksekusi beberapa kode langsung di dalam halaman membantu kami. Kita bisa mendapatkan objek tanggal, mengubahnya menjadi bentuk yang kita perlukan dan menampilkannya di halaman. Lalu setiap hari, kapanpun kita membuka halaman tersebut, tanggalnya akan selalu relevan. Jika kita hanya membutuhkan konten statis, maka server web biasa dan file html sudah cukup bagi kita. Kami tidak memerlukan Java, Maven, atau Tomcat. Namun jika kita ingin menggunakan konten dinamis, di sinilah semua ini akan berguna. Tapi untuk sekarang mari kita kembali ke index.jsp kita . Mari kita tunjukkan sesuatu milik kita sendiri alih-alih header standar, misalnya, "Aplikasi web super saya!", dan di badan kita akan menulis, misalnya, "Saya hidup!" Kami hampir siap meluncurkan proyek kami! Namun sayangnya, segitiga hijau yang biasa digunakan untuk meluncurkan program tersebut tidak aktif.
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 12
Mari kita klik tombol di sebelah kirinya (ditunjukkan di layar dengan panah merah) dan pilih Edit konfigurasi... Sebuah jendela akan terbuka di mana kita diminta mengklik tanda tambah hijau untuk menambahkan beberapa jenis konfigurasi. Klik di atasnya, terletak di sudut kiri atas jendela.
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 13
Pilih item Server Tomcat dan sub-item Lokal. Sebuah jendela akan terbuka dengan banyak parameter berbeda, tetapi kami senang dengan hampir semuanya dan yang default.
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 14
Kami entah bagaimana dapat memberi nama konfigurasi kami dengan baik alih-alih standar Tanpa Nama (di bagian paling atas). Penting juga untuk memeriksa apakah ide tersebut berhasil menemukan Tomcat di sistem kami (Anda sudah mengunduh dan menginstalnya sebelumnya , bukan?). Jika Anda tidak dapat menemukannya (yang kemungkinannya kecil), klik panah bawah dan pilih di mana kami menginstalnya, atau versi lain jika Anda memiliki beberapa di antaranya. Saya punya satu dan sudah terpasang, jadi semuanya tampak seperti di tangkapan layar. Dan di bagian paling bawah jendela kita melihat ada peringatan bahwa tidak ada satu artefak pun yang dimaksudkan untuk diterapkan ke server. Dan di sebelah kanan tulisan ini terdapat tombol yang menawarkan untuk memperbaiki cacat ini. Kami mengkliknya dan melihat bahwa ide itu sendiri menemukan segalanya, menciptakan segala sesuatunya sendiri, apa yang hilang, dan membuat semua pengaturannya sendiri.
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 15
Kami melihat bahwa kami dipindahkan dari tab Server ke tab Deployment , di bagian Deploy at the server startup kami sudah memiliki artefak yang perlu di-deploy, dan di bawahnya ditunjukkan bahwa artefak ini akan dibuat sebelum penerapan. Lamar, Oke. Dan kita melihat bahwa pertama, di bagian bawah jendela telah muncul bagian dengan server Tomcat lokal kita, tempat artefak kita akan ditempatkan. Anda dapat menutup bagian ini dengan mengklik tombol yang sesuai di sisi kanan jendela.
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 16
Kami juga melihat segitiga hijau untuk peluncuran sudah aktif. Bagi yang ingin memeriksa semuanya, Anda dapat mengklik tombol dengan pengaturan proyek (di sebelah kanan tombol peluncuran, ditandai dengan panah merah), masuk ke bagian Artefak dan pastikan artefak tersebut benar-benar telah dibuat. Itu tidak ada sampai kami menekan tombol Perbaiki , tapi sekarang semuanya baik-baik saja. Dan konfigurasi ini cukup cocok untuk kita. Singkatnya, perbedaan antara my-super-project:war dan my-super-project:war meledak adalah my-super-project:war hanya akan membuat satu file perang (yang hanya berupa arsip), dan opsi dengan meledak hanyalah perang yang “dibongkar” . Dan opsi ini secara pribadi lebih nyaman bagi saya, karena memungkinkan saya menerapkan perubahan kecil dengan cepat ke server. Sebenarnya artefak tersebut adalah proyek kami, baru saja dikompilasi, dan struktur foldernya telah diubah sehingga dapat diunggah langsung ke Tomcat. Ini akan terlihat seperti ini:
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 17
Nah, sekarang semuanya sudah siap untuk meluncurkan proyek kita. Kami menekan tombol start hijau yang didambakan dan menikmati hasilnya! :)
Membuat proyek web sederhana di IntelliJ Idea Enterprise.  Langkah demi langkah, dengan gambar - 18
Komentar
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION