CodeGym /Java Blog /Acak /Membuat proyek web paling sederhana di IntelliJ IDEA Ente...
John Squirrels
Level 41
San Francisco

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

Dipublikasikan di grup Acak
Pengetahuan yang diperlukan untuk memahami artikel: Anda kurang lebih sudah mengetahui Java Core dan ingin melihat teknologi JavaEE dan pemrograman web . Akan sangat masuk akal bagi Anda untuk saat ini mempelajari pencarian Koleksi Java, yang berhubungan dengan topik yang dekat dengan artikel.
Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 1
Saat ini, saya menggunakan IntelliJ IDEA Enterprise Edition ( catatan editor: ini adalah versi IDE berbayar yang diperluas; biasanya digunakan dalam pengembangan profesional). Jauh lebih mudah untuk bekerja dengan proyek web di dalamnya daripada di Edisi Komunitas gratis . Dalam Edisi Perusahaan , secara harfiah satu klik mouse membangun proyek, memasukkannya ke dalam wadah servlet, memulai server, dan bahkan membuka halaman web untuk proyek di browser. Dalam versi gratis IDEA, Anda harus melakukan sebagian besar dari ini sendiri, yaitu "secara manual". Saya menggunakan Apache Mavenuntuk membangun proyek dan mengelola siklus hidupnya. Saya hanya menggunakan sebagian kecil kemampuannya (manajemen paket/ketergantungan) dalam proyek ini. Sebagai servlet container/server aplikasi, saya memilih Apache Tomcat versi 9.0.12.

Mari kita mulai

Pertama, buka IntelliJ IDEA dan buat proyek Maven kosong . Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 2Di sebelah kiri, pilih Maven , dan periksa apakah JDK proyek dipilih di atas. Jika tidak ada, pilih salah satu dari daftar, atau klik Baru ... dan pilih salah satu dari komputer. Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 3Di jendela ini, Anda perlu menentukan GroupId dan ArtifactId . GroupId mengacu pada pengidentifikasi unik perusahaan yang mengeluarkan proyek . Praktik umum adalah menggunakan nama domain perusahaan, tetapi dalam urutan terbalik. Tapi tidak seperti cermin. Misalnya, jika nama domain perusahaan adalah maven.apache.org , maka GroupId-nya adalah org.apache.maven. Artinya, pertama-tama kita menulis domain level atas, menambahkan titik, lalu domain level kedua, dan seterusnya. Ini adalah pendekatan yang diterima secara umum. Jika Anda "menggiling" proyek sendiri (dan bukan sebagai bagian dari perusahaan), maka Anda memasukkan nama domain pribadi Anda di sini (juga dalam urutan terbalik!). Jika Anda memilikinya, tentu saja. :) Jika tidak, jangan khawatir. Anda benar-benar dapat menulis apapun di sini .
Untuk perusahaan dengan nama domain john.doe.org, GroupId akan menjadi org.doe.john. Konvensi penamaan ini diperlukan untuk memisahkan proyek dengan nama identik yang diproduksi oleh perusahaan berbeda.
Dalam contoh ini, saya akan menggunakan domain fiktif: fatlady.info.codegym.cc . Oleh karena itu, saya memasukkan cc.codergym.info.fatlady di bidang GroupId . ArtifactId hanyalah nama proyek kami. Anda dapat menggunakan huruf dan simbol tertentu (tanda hubung, misalnya) untuk memisahkan kata. "Artefak" kami akan diberi nama persis seperti yang kami tulis di sini. Dalam contoh ini, saya akan menggunakan my-super-project . Jangan sentuh bidang versi—biarkan saja apa adanya. Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 4Dan inilah jendela IDEA standar saat Anda membuat proyek baru. Mengikuti tradisi, sebut saja my-super-project . Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 5Proyek ini dibuat!
Pom.xml langsung dibuka. Ini adalah file dengan pengaturan Maven. Jika kami ingin memberi tahu Maven apa yang harus dilakukan atau di mana menemukan sesuatu, kami menjelaskan semuanya di file pom.xml ini. Itu terletak di akar proyek.
Kami melihat bahwa itu sekarang berisi data persis yang kami masukkan saat membuat proyek Maven : groupId , artifactId , dan versi (kami tidak menyentuh yang terakhir).

Struktur proyek kami

Proyek Maven ini memiliki struktur khusus. Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 6Seperti yang Anda lihat, root memiliki:
  • direktori .idea , yang berisi pengaturan IDEA proyek saat ini;
  • direktori src , tempat kami membuat kode sumber kami;
  • file my-super-project.iml , yang merupakan file proyek yang dibuat oleh IDEA;
  • file pom.xml (file proyek Maven yang saya sebutkan sebelumnya), yang sekarang terbuka. Jika saya menyebutkan pom.xml di suatu tempat, ini adalah file yang saya bicarakan.
Di dalam folder src , ada dua subfolder:
  • main — untuk kode kita;
  • test — untuk menguji kode kita.
Di main dan test , ada folder java . Anda dapat menganggap ini sebagai folder yang sama, kecuali yang utama adalah untuk kode sumber, dan yang di uji adalah untuk kode uji. Untuk saat ini, kami tidak menggunakan folder sumber daya . Kami tidak akan menggunakannya. Tapi biarkan saja di sana.

Mengubahnya menjadi proyek web

Saatnya kita mengubah proyek Maven kita menjadi proyek web. Untuk melakukan ini, klik kanan pada nama proyek di pohon ini dan pilih Tambahkan dukungan kerangka kerjaMembuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 7Sebuah jendela terbuka tempat kami dapat menambahkan dukungan untuk berbagai kerangka kerja ke proyek kami. Tapi kita hanya butuh satu: Aplikasi Web . Dan itulah yang kami pilih. Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 8Pastikan kotak centang Aplikasi Web dipilih, dan jendela utama menunjukkan bahwa kami ingin file web.xml dibuat secara otomatis (Saya sarankan memilih kotak centang, jika belum dipilih). Kami kemudian melihat bahwa folder web telah ditambahkan ke struktur proyek kami. Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 9Ini adalah akar dari proyek web kami dengan alamatnya/. Dengan kata lain, jika kita memasukkan ' localhost ' di browser (saat proyek berjalan tentunya), maka akan terlihat di sini, di akar proyek web. Jika kita masuk ke localhost/addUser , maka akan mencari resource bernama addUser di folder web .
Hal utama yang perlu Anda pahami adalah bahwa folder web adalah root dari proyek kami saat kami memasukkannya ke dalam Tomcat. Kami memiliki struktur folder tertentu sekarang, tetapi dalam proyek selesai yang akan kami buat, itu akan sedikit berbeda. Secara khusus, folder web akan menjadi root.
Di web , ada folder wajib bernama WEB-INF , tempat file web.xml berada, yaitu folder yang kami minta untuk dibuat oleh program di langkah terakhir. Mari kita buka. Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 10Anda dapat melihat bahwa belum ada yang menarik di dalamnya, hanya sebuah header. By the way, jika Anda tidak meminta file yang akan dibuat, maka Anda harus membuatnya secara manual, yaitu ketik semua header dengan tangan. Atau, setidaknya, cari versi yang sudah jadi di Internet. Untuk apa kita membutuhkan web.xml ? Untuk pemetaan. Di sinilah kami akan menjelaskan untuk Tomcat URL mana yang diminta untuk diteruskan ke servlet mana. Tapi kita akan membahasnya nanti. Untuk saat ini, biarkan kosong. Folder web juga memiliki file index.jsp. Buka. Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 11Ini adalah file yang akan dieksekusi secara default. Dengan kata lain, inilah yang akan kita lihat saat kita memulai proyek. Pada dasarnya, jsp adalah file HTML biasa , kecuali Anda dapat mengeksekusi kode Java di dalamnya.

Sedikit tentang konten statis dan dinamis

Konten statis adalah konten yang tidak berubah seiring waktu. Segala sesuatu yang kita tulis dalam file HTML ditampilkan tidak berubah, seperti yang tertulis. Jika kita menulis " halo dunia ", teks ini akan ditampilkan segera setelah kita membuka halaman, dan dalam 5 menit, dan besok, dan dalam seminggu, dan dalam setahun. Itu tidak akan berubah. Tetapi bagaimana jika kita ingin menampilkan tanggal saat ini di halaman? Kalau kita tulis saja " 27 Oktober 2017", lalu besok kami akan melihat tanggal yang sama, dan seminggu kemudian, dan setahun kemudian. Tapi kami ingin tanggalnya terkini. Di sinilah kemampuan untuk mengeksekusi kode tepat di halaman sangat membantu. Kami bisa mendapatkan objek tanggal, konversikan ke format yang diinginkan, dan tampilkan di halaman. Kemudian, setiap hari saat kita membuka halaman, tanggal akan selalu terkini. Jika kita hanya membutuhkan konten statis, maka kita hanya memerlukan server web biasa dan File HTML. Kita tidak membutuhkan Java, Maven, atau Tomcat. Namun jika kita ingin menggunakan konten dinamis, maka kita memerlukan semua alat tersebut. Namun untuk saat ini, mari kembali ke index.jsp kita . Mari tunjukkan sesuatu selain judul standar, misalnya, " Aplikasi web super saya! " Lalu, di badan, mari tulis " Saya hidup! " Kita hampir siap untuk memulai proyek kita! Sayangnya, segitiga hijau biasa untuk memulai program tidak aktif. Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 12Klik tombol di sebelah kirinya (ditunjukkan pada layar dengan panah merah) dan pilih Edit konfigurasi ... Itu membuka jendela di mana kita diundang untuk mengklik tanda tambah hijau untuk menambahkan beberapa konfigurasi. Klik di atasnya (di sudut kiri atas jendela). Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 13Pilih Server Tomcat > Lokal . Jendela dengan banyak opsi akan terbuka, tetapi defaultnya cocok untuk hampir semua hal. Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 14Kami dapat memberikan konfigurasi kami nama yang cantik alih-alih Unnamed standar (di bagian paling atas). Kami juga perlu memverifikasi bahwa IDEA telah berhasil menemukan Tomcat di sistem kami (Anda telah mengunduh dan menginstalitu benar?). Jika tidak ditemukan (yang tidak mungkin), tekan panah bawah dan pilih tempat pemasangannya. Atau pilih versi lain, jika Anda menginstal lebih dari satu. Saya hanya punya satu dan sudah terpasang. Itu sebabnya tampilannya seperti itu di layar saya. Dan di bagian paling bawah jendela, kami melihat peringatan yang memberi tahu kami bahwa sejauh ini tidak ada artefak yang ditunjukkan untuk diterapkan ke server. Di sebelah kanan peringatan ini ada tombol yang menyarankan agar kami memperbaikinya. Kami mengkliknya dan melihat bahwa IDEA dapat menemukan semuanya dengan sendirinya, membuat semua yang hilang dengan sendirinya, dan mengonfigurasi semua pengaturan dengan sendirinya. Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 15Kita dapat melihat bahwa itu memindahkan kita dari tab Server ke tab Deployment , di bawah Deploy at the server startupbagian, dan kami sekarang memiliki artefak untuk digunakan. Klik Terapkan dan OK. Dan pertama-tama kami melihat bahwa di bagian bawah jendela, sebuah bagian telah muncul dengan server Tomcat lokal kami, tempat artefak kami akan ditempatkan. Tutup bagian ini dengan mengeklik tombol yang sesuai di sisi kanan jendela. Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 16Sekarang kita melihat segitiga peluncuran hijau aktif. Bagi mereka yang suka memeriksa ulang semuanya, Anda dapat mengklik tombol pengaturan proyek (di sebelah kanan tombol peluncuran, ditandai dengan panah merah), buka bagian Artefak, dan pastikan artefak itu benar-benar dibuat . Itu tidak ada sampai kami menekan Fix itutombol, tapi sekarang semuanya OK. Dan konfigurasi ini sangat cocok untuk kita. Singkatnya, perbedaan antara proyek-super saya: perang dan proyek-super saya: perang meledak adalah proyek-super saya: perang hanya terdiri dari satu file perang (yang hanya berupa arsip) dan versi dengan meledak hanyalah perang yang "dibongkar" . Dan secara pribadi, itulah opsi yang menurut saya lebih nyaman, karena memungkinkan Anda dengan cepat men-debug perubahan kecil di server. Intinya, artefak adalah proyek kami, baru saja dikompilasi — dan di mana dengan struktur folder telah diubah untuk memungkinkan Tomcat mengaksesnya secara langsung. Ini akan terlihat seperti ini:
Membuat proyek web paling sederhana di IntelliJ IDEA Enterprise.  Langkah demi langkah, dengan gambar - 17
Sekarang semuanya siap untuk meluncurkan proyek kami. Tekan tombol peluncuran hijau yang berharga dan nikmati hasilnya! :)
Membuat proyek web paling 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