Pengenalan Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (part 4)

Selamat siang. Pada artikel ini saya ingin berbagi pengalaman pertama saya dengan hal-hal seperti Maven, Spring, Hibernate, MySQL dan Tomcat dalam proses pembuatan aplikasi CRUD sederhana. Ini adalah bagian terakhir. Artikel ini ditujukan terutama bagi mereka yang telah menyelesaikan 30-40 level di sini, namun belum berani melampaui Java murni dan baru saja mulai (atau akan memulai) memasuki dunia terbuka dengan semua teknologi, kerangka kerja, dan hal asing lainnya. kata-kata. Ini adalah bagian keempat terakhir dari artikel “Pengantar Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama.” Bagian sebelumnya dapat dilihat pada tautan berikut:

• Pengenalan Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (part 1)
• Pengenalan Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (part 2)
• Pengenalan Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (part 3)

Isi:

• Desain dan sumber daya web
• Paginasi
• Kesimpulan

Desain dan sumber daya web

Aplikasi kami berfungsi, tetapi Anda tidak dapat melihatnya tanpa air mata, tulisan membosankan, tautan jelek, latar belakang putih kosong. Kita perlu memperbaikinya dan menambahkan keindahan yang berbeda. Bagaimana kita melakukan ini? Pertama-tama, Anda bisa bermain-main dengan halaman dan melakukan segala macam hal menggunakan kemampuan HTML . Namun jika mencoba mengubah background, warna, ukuran, susunan elemen, dll hanya menggunakan HTML saja. dan seterusnya. lalu pada akhirnya Anda dapat membuat halaman menjadi berantakan sehingga Anda tidak dapat melihat apa pun di sana nanti. Selain itu, pilihan desain HTML cukup terbatas. Lebih baik menggunakan CSS (Cascading Style Sheets) untuk ini . Kemudian segala sesuatu yang berhubungan dengan desain dapat dikumpulkan di satu tempat, dan kemudian diterapkan pada elemen halaman yang diinginkan. Kode CSS dapat ditulis langsung pada halaman JSP dalam tag khusus, tetapi akan lebih mudah untuk meletakkannya di file terpisah, dan kemudian menerapkannya ke halaman yang diperlukan. Untuk menempatkan file dengan gaya dan sumber daya web statis lainnya, kita akan membuat direktori terpisah di dalam webapp . Agar tidak membingungkan sumber daya web dengan sumber daya biasa (di mana kita memiliki db.properties ), sebut saja direktori ini res dan tempatkan semua file CSS, gambar, dll. di sana: Untuk menggunakan file-file ini kita perlu menentukan lokasinya di konfigurasi. Ayo pergi ke kelas kita WebConfig. Sebelumnya, kami menggunakan anotasi @EnableWebMvcuntuk tidak mengonfigurasi apa pun, tetapi cukup menggunakan konfigurasi default. Tapi sekarang ada kebutuhan untuk mengkonfigurasi sesuatu. Untuk melakukan ini, kami menggunakan antarmuka WebMvcConfigurer, yang memungkinkan Anda mengganti metode konfigurasi. Itu. kita dapat menggunakan konfigurasi default, tetapi pada saat yang sama menyesuaikan beberapa aspek untuk diri kita sendiri. Dalam hal ini addResourceHandlers, kita memerlukan metode yang dapat digunakan untuk menunjukkan lokasi sumber daya web statis. Untuk berjaga-jaga, seluruh kelas akan terlihat seperti ini:

package testgroup.filmography.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "testgroup.filmography")
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/res/**").addResourceLocations("/res/");
    }

    @Bean
    ViewResolver viewResolver() {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setPrefix("/WEB-INF/pages/");
        viewResolver.setSuffix(".jsp");
        return viewResolver;
    }
}

Sekarang untuk menggunakan CSS kami di halaman, Anda perlu menautkannya ke dalam tag head:

<head>
    <link href="<c:url value="/res/style.css"/>" rel="stylesheet" type="text/css"/>
</head>

Cukup tambahkan baris ini dan buat, misalnya, file CSS sederhana ini:

table {
    border-spacing: 0 10px;
    font:  bold 100% Georgia, serif;
    margin: 40px auto;
    text-shadow: 5px 5px 5px #3F3F7F;
    background: #B1B9D9;
    text-align: center;
    vertical-align: middle;
    width: 50%;
    border: 10px solid blue;
}

Dan ini akan benar-benar mengubah tabel kita (tentu saja terlihat bodoh, tetapi seperti ini, misalnya): Yah, menurut saya tidak perlu membicarakan CSS secara detail, semuanya cukup sederhana. Di Internet Anda dapat menemukan banyak pilihan siap pakai untuk mendesain tabel dan formulir. Namun lebih baik tentunya melakukan desain sendiri, tidak perlu menjadi seorang desainer, lagipula ini bukan situs yang rumit. Bahkan beberapa jam setelah perkenalan pertama saja sudah cukup untuk membuat desain yang cukup indah dan rapi untuk halaman sederhana tersebut. Selain itu, Internet penuh dengan segala macam pelajaran, contoh, ada situs khusus di mana Anda dapat mengedit HTML, CSS secara bersamaan dalam satu layar dan langsung melihat seperti apa semuanya. Dengan sedikit latihan Anda dapat menciptakan karya seni yang nyata. Benar, Anda juga tidak boleh terlalu terbawa suasana di sini (kecuali, tentu saja, Anda memiliki rencana untuk menjadi seorang desainer), jika tidak, desain adalah hal yang penting, Anda bisa terjebak di sini untuk waktu yang sangat lama. Ketika saya pertama kali mulai memahami CSS, saya mengalami kebuntuan. Saya ingin mencoba segalanya, setiap properti, memelintir sesuatu, mengutak-atiknya, bereksperimen, mengambil halaman beberapa situs dan membuatnya ulang hingga tidak dapat dikenali lagi. Saya mungkin bersenang-senang dengan mainan ini selama seminggu, tidak melakukan apa pun sampai mainan itu melepaskan saya :) Secara umum, tentu saja, Anda tidak boleh berlebihan dan membuat keajaiban warna-warni yang tidak dapat dipahami, Anda harus melakukannya dengan sederhana dan dengan penuh selera. Satu-satunya hal yang perlu diperhatikan. Perlu Anda pahami bahwa CSS adalah deskripsi desain , dan HTML adalah markup . Anda tidak boleh mencoba melakukan semuanya melalui CSS; beberapa aspek akan sangat sulit dilakukan, dan beberapa tidak mungkin dilakukan, ketika dalam HTML hal ini dilakukan dengan beberapa baris tambahan, atau bahkan hanya satu atribut dalam sebuah tag. Anda perlu menggabungkannya, membuat segala macam warna, latar belakang, font dalam CSS, dan jika, misalnya, Anda perlu menggabungkan beberapa sel tabel, lebih mudah menggunakan alat HTML. Misalnya, inilah yang dapat saya lakukan dengan halaman-halaman tersebut dalam beberapa jam mengutak-atik CSS dan HTML (saya tidak akan menjelaskan secara detail di sini tentang kekacauan yang saya buat untuk mencapai ini, pada akhirnya akan ada tautan ke GitHub proyek ini, di mana Anda dapat melihatnya): Tentu saja, saya tidak tahu seberapa kompeten saya melakukan semuanya di sana, tetapi mengingat saya pertama kali melihat CSS seminggu sebelumnya, menurut saya hasilnya cukup baik.

Paginasi

Sekarang semuanya berfungsi, kelihatannya bagus, tetapi sejauh ini hanya ada beberapa catatan di tabel. Bagaimana jika ada seratus atau seribu film di dalamnya? Sangat tidak nyaman untuk menelusuri daftar yang begitu panjang. Akan lebih mudah jika daftar ditampilkan dalam halaman yang terdiri dari 10 entri, misalnya. Oleh karena itu, sekarang kami akan mencoba menerapkan pemisahan daftar menjadi beberapa halaman (terkadang ini juga disebut "paging" atau "pagination" ( pagination bahasa Inggris )). Hal ini dapat dilakukan dengan berbagai cara. Misalnya, Anda dapat mentransfer daftar lengkap ke halaman jsp dan membuat tabel di sana untuk jumlah rekaman yang diperlukan. Atau, misalnya, Anda dapat mengeluarkan catatan yang diperlukan dari daftar umum di layanan, lalu mengirimkan daftar mini ini ke halaman jsp untuk ditampilkan. Tapi tentu saja yang terbaik adalah melakukan ini di tingkat database. Idenya bukan untuk mengambil daftar lengkap dari database dan kemudian memecahnya menjadi beberapa bagian, tetapi untuk mendapatkan bagian yang diperlukan dari database terlebih dahulu tanpa menyentuh yang lainnya. Lagipula kenapa kita perlu mengeluarkan ratusan atau ribuan record dari database sekaligus, kalau yang kita butuhkan ada di sepuluh besar, lebih baik keluarkan sepuluh ini saja. Mari masuk ke DAO dan tambahkan allFilmsparameter ke metode int pageyang akan bertanggung jawab atas nomor halaman (dalam layanan, tentu saja, kami melakukan hal yang sama). Dan mari kita ubah sedikit penerapan metode ini; jika sebelumnya kita menarik seluruh daftar, sekarang kita hanya menarik sebagian saja. setFirstResultMetode (baris tabel mana yang akan dimulai) dan setMaxResults(berapa banyak record yang akan ditampilkan) akan membantu kita dalam hal ini :

@SuppressWarnings("unchecked")
public List<Film> allFilms(int page) {
    Session session = sessionFactory.getCurrentSession();
    return session.createQuery("from Film").setFirstResult(10 * (page - 1)).setMaxResults(10).list();
}

Itu. jika ini halaman 1 maka kita tampilkan maksimal 10 record yang dimulai dari tanggal 0, jika ini halaman ke 5 maka 10 record yang dimulai dari tanggal 40 (jangan lupa penomoran pada database dimulai dari 0). Kami juga akan membuat metode tambahan yang akan mengembalikan jumlah record dalam tabel. Kami memerlukan ini untuk mengetahui jumlah semua halaman dan membuat link untuk halaman tersebut di halaman jsp kami:

public int filmsCount() {
     Session session = sessionFactory.getCurrentSession();
     return session.createQuery("select count(*) from Film", Number.class).getSingleResult().intValue();
 }

Dengan menggunakan kueri seperti itu, kita akan mendapatkan jumlah semua record dalam tabel (sebagai intnilai) tanpa mengeluarkan record itu sendiri. Sekarang mari kita pergi ke pengontrol dan mengerjakan metode yang mengembalikan halaman utama dengan daftar film:

@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView allFilms(@RequestParam(defaultValue = "1") int page) {
    List&ltFilm> films = filmService.allFilms(page);
    int filmsCount = filmService.filmsCount();
    int pagesCount = (filmsCount + 9)/10;
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("films");
    modelAndView.addObject("page", page);
    modelAndView.addObject("filmsList", films);
    modelAndView.addObject("filmsCount", filmsCount);
    modelAndView.addObject("pagesCount", pagesCount);
    return modelAndView;
}

Anotasi baru telah muncul di sini @RequestParam, yang menunjukkan bahwa kami mendapatkan nilai ini dari parameter permintaan. Sekarang, jika kita pergi ke alamat dengan parameter, misalnya http://localhost:8080/ ?page=4 , kita akan mendapatkan halaman ke-4. Kami menetapkan nilai default ke " 1 " sehingga ketika aplikasi dimulai, ketika kita pergi ke alamat tanpa parameter http://localhost:8080/ , kita mendapatkan halaman pertama. Dalam metode ini kita mendapatkan jumlah semua record, kemudian dengan cara sederhana ini kita menghitung jumlah halaman. Itu. kalau kita punya 10 record, ini 1 halaman, dan kalau ada 11, berarti sudah 2. Nah, kita transfer semuanya ke model. Anda perlu mengetahui jumlah halaman untuk membuat tautan ke semuanya dalam satu siklus, dan biarkan jumlah film ada di sana untuk berjaga-jaga, misalnya, jika Anda ingin menampilkan informasi ini di suatu tempat di halaman. Sekarang yang tersisa hanyalah pergi ke film.jsp dan menambahkan link ke setiap halaman menggunakan konstruksi ini:

<c:forEach begin="1" end="${pagesCount}" step="1" varStatus="i">
    <c:url value="/" var="url">
        <c:param name="page" value="${i.index}"/>
    </c:url>
    <a href="${url}">${i.index}</a>
</c:forEach>

Kami membuat tautan berdasarkan penghitung 1, 2, 3, ... dan mengatur parameter berdasarkan nilai indeks. Mari tambahkan satu sentuhan kecil lagi. Kami kembali ke pengontrol. Dalam metode tambah, edit dan hapus, setelah operasi selesai, kami mengarahkan ke halaman utama "redirect:/" . Itu. jika kita berada di suatu tempat di halaman ke-50 dan klik edit entri, maka setelah eksekusi kita akan pergi ke alamat " / ", mis. Mari kita kembali ke halaman 1. Ini sangat tidak nyaman; saya ingin kembali ke tempat asal kami. Mari kita selesaikan ini dengan sangat sederhana. FilmControllerMari kita membuat variabel instan di kelasint page

private int page;

Di dalam metode ini allFilmskita akan menetapkan nilai parameter ke variabel ini page:

this.page = page;

Itu. Setiap kali metode ini dijalankan (yaitu ketika kita menavigasi halaman), nilai halaman saat ini akan ditulis ke variabel. Dan kemudian kami menggunakan nilai ini dalam metode kami untuk mengarahkan kembali ke halaman yang sama.

modelAndView.setViewName("redirect:/?page=" + this.page);

Kesimpulan

Kita mungkin akan berakhir di sini. Hasilnya adalah aplikasi CRUD yang lengkap. Hal ini tentu jauh dari ideal (sangat jauh), namun dapat dioptimalkan dan ditingkatkan, bug diperbaiki dan fungsionalitas ditambahkan. Anda dapat menggunakan metode bawaan untuk operasi kasar; tambahkan pemfilteran, pencarian, penyortiran; tambahkan tabel terkait lainnya; menerapkan dukungan untuk pengguna yang berbeda dengan otorisasi dan otentikasi, dll. dan seterusnya. Ruang lingkup imajinasi tidak terbatas, jadi lakukanlah. Tautan ke github proyek ini . Terima kasih atas perhatian Anda. PS Ini adalah upaya pertama saya dalam hidup saya untuk menulis artikel, jadi jangan menilai secara ketat :). Saya minta maaf karena tidak menambahkan tautan lain ke sumber daya yang bermanfaat; sayangnya, saya masih belum bisa mengembangkan kebiasaan menyimpan tautan ke sumber tempat saya memperoleh informasi. Dan tentunya saya mohon maaf atas banyaknya surat, singkatnya bukan bakat saya, saya harap ada yang bisa mengatasinya. Tautan ke semua bagian

• Pengenalan Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (part 1)
• Pengenalan Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (part 2)
• Pengenalan Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (part 3)
• Pengenalan Maven, Spring, MySQL, Hibernate dan aplikasi CRUD pertama (part 4)