Vol.
No.
Desember 2024
ISSN 3089-8366
(Media Onlin.
Rancang Bangun Blog Berita Berbasis Laravel Dan Tailwind SAP Primayani1.
IGW Sanjaya2 SMK Bali Dewata.
Denpasar.
Indonesia Program Studi Informatika.
Fakultas Dharma Duta.
Bangli.
Indonesia email: 1ayuprima@gmail.
com , 2wahyu_sanjaya@uhnsugriwa.
Abstract This study aims to design and develop an efficient and attractive web-based news blog using the Laravel and Tailwind CSS frameworks.
Through a development research approach, this study follows the stages of needs analysis, system design, system development, testing, and evaluation.
The results of the study indicate that the news blog developed successfully meets user needs and has a modern and responsive appearance.
The use of Laravel and Tailwind CSS simplifies the development process and produces a flexible and easyto-maintain system.
This study contributes to the development of web-based information systems, especially in the field of news blog development.
Based on the test results using Black Box Testing, the system was tested using 18 test model items and obtained 100% valid results, this indicates that the system is running well and can be published for general use.
Keywords: Laravel.
Tailwind CSS.
News Blog.
System Development.
Development Research.
Abstrak Penelitian ini bertujuan untuk merancang dan mengembangkan sebuah blog berita berbasis web yang efisien dan menarik menggunakan framework Laravel dan Tailwind CSS.
Melalui pendekatan penelitian pengembangan, penelitian ini mengikuti tahapan analisis kebutuhan, perancangan sistem, pengembangan sistem, pengujian, dan evaluasi.
Hasil penelitian menunjukkan bahwa blog berita yang dikembangkan berhasil memenuhi kebutuhan pengguna dan memiliki tampilan yang modern serta responsif.
Penggunaan Laravel dan Tailwind CSS mempermudah proses pengembangan serta menghasilkan sistem yang fleksibel dan mudah dipelihara.
Penelitian ini memberikan kontribusi dalam pengembangan sistem informasi berbasis web, khususnya dalam bidang pengembangan blog berita.
Berdasarkan hasil pengujian menggunakan Black Box Testing sistem diuji menggunakan 18 butir model pengujian dan mendapatkan hasil 100% valid, hal ini menunjukkan bahwa sistem sudah berjalan dengan baik dan dapat dipublikasikan untuk digunakan secara umum.
Kata kunci: Laravel.
Tailwind CSS.
Blog Berita.
Pengembangan Sistem.
Penelitian Pengembangan.
Diajukan: 13 Januari 2025.
Direvisi: 16 Januari 2025.
Diterima: 17 Januari 2025.
PENDAHULUAN
Dalam era digital yang semakin pesat, informasi menjadi komoditas yang sangat berharga .
Teknologi saat ini telah memberikan dampak yang besar bagi kehidupan manusia, teknologi berkembang dengan cepat, sehingga kita tidak dapat menolak adanya teknologi .
Dengan adanya internet sebagai media untuk menjangkau semua informasi dengan cepat .
Media online seperti website blog, telah menjadi salah satu media yang dapat digunakan untuk menyebarkan informasi kepada masyarakat luas.
Kemudahan akses internet dan perangkat mobile telah mendorong pertumbuhan blog secara eksponensial.
Blog tidak hanya berfungsi sebagai media pribadi untuk berbagi pengalaman, tetapi juga sebagai wadah untuk menyebarkan berita dan informasi terkini.
Perkembangan teknologi informasi telah mengubah lanskap media secara drastis.
Munculnya internet dan berbagai perangkat pintar telah memfasilitasi produksi dan distribusi konten secara massal.
Salah satu bentuk media online yang populer adalah blog.
Blog tidak hanya berfungsi sebagai media pribadi untuk berbagi pengalaman, tetapi juga sebagai platform untuk menyebarkan informasi, berita, dan opini.
Pada era digital saat ini, blog telah mengalami evolusi yang signifikan.
Informasi yang ditampilkan memberikan berbagai manfaat dalam mengembangkan kemampuan, pengetahuan bahkan menjadi salah satu alat untuk mengambil langkah strategis para pengambil kebijakan pada suatu organisasi .
Persaingan di dunia blogging semakin ketat, menuntut para pembuat blog untuk terus berinovasi dalam hal konten dan Meskipun demikian, pengembangan blog seringkali dihadapkan pada beberapa tantangan.
Salah Journal Informatics NIVEDITA | 11 Vol.
No.
Desember 2024
ISSN 3089-8366
(Media Onlin.
satunya adalah efisiensi dalam pengelolaan konten.
Proses pembuatan, pengelolaan, dan publikasi konten pada blog tradisional seringkali memakan waktu yang cukup lama dan membutuhkan keahlian teknis yang Selain itu, tampilan visual blog yang menarik dan responsif terhadap berbagai perangkat juga menjadi faktor penting untuk menarik minat pembaca.
Dalam implementasi pemanfaatan sistem informasi haruslah didukung oleh sebuah perencanaan yang strategis untuk sistem informasi yang lebih baik dan Sehingga tujuan dan sasaran yang diharapkan oleh organisasi dapat mencapai hasil yang optimal .
Blog tentunya lebih ringkas dalam memaparkan sebuah informasi, selain itu blog dapat digunakan untuk menyebarkan informasi dan kegiatan sebuah organisasi.
Namun karena susahnya mencari informasi terkait membuat sebuah halaman blog yang simple, sehingga banyak organisasi menggunakan platform blog yang telah tersedia.
Tentunya fitur yang dimiliki terbatas dan harus diulik secara lebih mendalam untuk menghasilkan fitur yang sesuai dengan keperluan.
Berdasarkan permasalahan di atas, terdapat permasalahan yang menarik untuk digali, yaitu pengembangan blog berita yang efisien dan memiliki tampilan yang menarik.
Penelitian ini bertujuan untuk merancang dan membangun sebuah blog berita berbasis Laravel dan Tailwind CSS.
Laravel, sebagai salah satu framework PHP yang populer, menawarkan kemudahan dalam pengembangan aplikasi web, termasuk Kecepatan proses dalam menampilkan konten yang tersedia pada halaman website juga perlu diperhatikan, halaman website banyak ditinggalkan karena terlalu banyak konten sehingga saat awal dibuka membutuhkan waktu yang lama.
Laravel merupakan salah satu framework yang dapat digunakan untuk mengatasi permasalahan dalam menampilkan halaman utama agar lebih cepat, karena memiliki proses yang lebih ringkas dan waktu eksekusi yang lebih sedikit .
Laravel dibuat untuk mempermudah dalam membuat sebuah sistem, karena terdapat blok-blok syntak yang telah disematkan di dalam paketnya.
Selain itu penambahan fitur dalam saat implementasi, sangat mudah dilakukan tanpa harus melakukan pencarian di halaman website lain.
Sementara itu.
Tailwind CSS, sebagai framework CSS berbasis utilitas, memungkinkan pembuatan tampilan yang custom dan responsif dengan cepat.
Tailwind CSS menyediakan berbagai blok tampilan yang dibutuhkan saat pembuatan sebuah sistem, sehingga tidak perlu melakukan kustomisasi tampilan dari awal.
METODE
Metode penelitian pengembangan sangat cocok untuk menyelesaikan permasalahan pada penelitian ini, metode ini memungkinkan untuk merancang, mengembangkan, dan mengevaluasi sistem secara Perancangan merupakan runutan proses yang dilakukan untuk merencanakan atau merancang suatu proyek, sistem, atau proses untuk mencapai hasil yang diinginkan .
, .
Perancangan mencakup identifikasi masalah, pemilihan solusi, dan mengatur langkah-langkah yang telah ditetapkan.
Perancangan dapat diterapkan dalam berbagai bidang, seperti mendesain perangkat lunak, database sistem, sistem informasi, proses bisnis.
Tahapan dalam melakukan perancangan mencakup analisa kebutuhan sistem, pengumpulan informasi, perumusan ide dan konsep, pengujian dan evaluasi sistem.
Analisis Kebutuhan Pengujian Sistem Perancanga n Sistem Pengemban gan Sistem Gambar 1 Alur Pembuatan Sistem Berdasarkan kepada gambar 1, langkah-langkah yang digunakan untuk menyelesaikan permasalahan penelitian sebagai berikut .
Analisis Kebutuhan Pada tahap awal ini, fokus utama adalah mengenali masalah yang perlu diselesaikan atau kebutuhan yang harus dipenuhi oleh sistem informasi yang akan dikembangkan .
Melakukan Journal Informatics NIVEDITA | 12 Vol.
No.
Desember 2024
ISSN 3089-8366
(Media Onlin.
Identifikasi pengguna, dalam hal ini siapa saja yang akan menggunakan sistem.
Misalnya, pembaca umum, penulis, admin.
Tentukan kebutuhan fitur sistem yang diperlukan, seperti:
A Fitur penulisan artikel A Manajemen kategori A Fitur pencarian Perancangan Sistem Pada tahapan ini, melakukan perancangan basis data menggunakan MySQL dan perancangan antarmuka menggunakan bahasa pemrograman PHP dan CSS yang digunakan untuk mempercantik halaman website.
Pengembangan Sistem Pada tahapan ini, melakukan pengkodean menggunakan bahasa pemrograman Laravel untuk mengimplementasikan desain yang telah disusun sebelumnya.
Pembangunan sistem dilakukan dengan membuat kerangka kerja dengan konsep MVC (Model-View-Contro.
MVC adalah sebuah metode untuk membuat sebuah aplikasi dengan memisahkan data (Mode.
dari tampilan (Vie.
dan cara bagaimana memprosesnya (Controlle.
Pengujian Sistem Setelah selesai proses pencodingan, tahapan selanjutnya adalah melakukan pengujian.
Pengujian dilakukan untuk memastikan bahwa sistem informasi berfungsi dengan baik sesuai dengan yang Metode pengujian menggunakan metode Black Box Testing.
HASIL DAN PEMBAHASAN
Hasil Analisis Kebutuhan Analisis kebutuhan menghasilkan beberapa hal antara lain pengguna sistem yang dibuat terdiri dari Admin yang mengelola Website Blog dari sisi backend.
Author selaku pembuat konten.
Pembaca adalah pengunjung website blog.
Selain itu beberapa fitur dari sistem yang akan disediakan adalah Halaman Penampil artikel yang diunggah oleh penulis, pengelolaan artikel berupa fitur penambahan, pengeditan, penghapusan dan melihat tampilan artikel, pengelolaan kelompok artikel dalam hal ini disebut dengan Category, serta fitur untuk melakukan update Profil bagi Author.
Dari sisi pengguna, sistem ini menyediakan beberapa fitur yang memudahkan pengunjung diantaranya pengguna dapat melakukan pencarian artikel sesuai dengan penulis, judul atau category artikel.
Selain itu pengunjung website akan dimudahkan jika ingin melihat artikel berdasarkan salah satu penulis atau berdasarkan salah satu category Alur Sistem Gambaran alur sistem sesuai pada Gambar 2, dalam sistem terdapat 2 role sebagai penulis dan pembaca blog.
Role admin nantinya akan digunakan untuk memanage database dan tampilan sistem secara Role author digunakan untuk menginputkan artikel ke dalam sistem, author hanya dapat mengunggah tulisannya jika sudah melakukan registrasi.
Sedangkan role pembaca hanya dapat membaca artikel pada sistem.
Gambar 2 Rancangan Alur Sistem Halaman Register Halaman Register merupakan halaman yang disediakan untuk melakukan pendaftaran user sebagai penulis pada halaman blog.
Tampilan dari halaman registrasi seperti pada gambar 3.
Journal Informatics NIVEDITA | 13 Vol.
No.
Desember 2024
ISSN 3089-8366
(Media Onlin.
Gambar 3 Halaman Register Jika proses registrasi berhasil maka user mendapatkan notifikasi dan diarahkan ke halaman login sistem, tampilan login sistem sesuai dengan gambar 4.
Gambar 4 Notifikasi setelah berhasil melakukan registrasi Halaman Login Halaman login merupakan halaman yang digunakan untuk masuk ke dalam sistem, proses login digunakan untuk menjaga sistem dari orang-orang yang ingin melakukan kejahatan.
Halaman login sistem sesuai dengan gambar 5.
Proses login dapat berhasil jika pengguna telah melakukan proses registrasi.
Gambar 5 Halaman Login Sistem Jika user belum terdaftar, atau terdapat inputan email dan password yang salah maka sistem akan memberikan notifikasi seperti pada gambar 6.
Journal Informatics NIVEDITA | 14 Vol.
No.
Desember 2024
ISSN 3089-8366
(Media Onlin.
Gambar 6 Notifikasi Ketika Gagal Login Halaman Dashboard Penulis Halaman dashboard sesuai pada gambar 7, merupakan halaman yang digunakan oleh penulis untuk mengelola postingan artikel.
Dalam dashboard ini terdapat beberapa menu seperti menu My Post digunakan untuk mengelola artikel penulis.
Menu Categories digunakan penulis untuk mengelola kelompok artikel yang akan dipublish.
Menu View Blog dapat digunakan untuk melihat halaman blog secara keseluruhan, menu My Profile dapat digunakan untuk mengelola akun seperti merubah nama, email dan menambahkan photo profile penulis serta menu Logout digunakan untuk keluar dari sistem sebagai penulis.
Gambar 7 Halaman Dashboard Penulis Halaman Pengelolaan Artikel Halaman pengelolaan artikel dapat diakses oleh penulis pada menu my Post.
Pada halaman ini akan muncul semua artikel-artikel yang telah ditulis oleh penulis yang ditampilkan dalam bentuk tabel.
Halaman pengelolaan artikel sesuai pada gambar 8.
Gambar 8 Halaman Pengelolaan Artikel Journal Informatics NIVEDITA | 15 Vol.
No.
Desember 2024
ISSN 3089-8366
(Media Onlin.
Gambar 9 Halaman Untuk Menambahkan Postingan Halaman tambah artikel sesuai pada gambar 9, merupakan halaman yang akan ditampilkan oleh sistem jika penulis ingin menambahkan artikel.
Dalam halaman tambah artikel terdapat beberapa isian yang harus diisi oleh penulis diantaranya Judul Artikel.
Slug atau kata unik dari artikel yang nantinya digunakan untuk melakukan editing atau menghapus artikel.
Category.
Gambar Artikel, dan Isi dari Artikel yang akan Halaman tambah artikel sudah dilengkapi dengan editor TRIX yang dapat memudahkan penulis dalam membuat tulisan pada isi artikel.
Beberapa fitur yang familiar disediakan oleh TRIX editor sehingga semua penulis nantinya bisa lebih berkreasi dalam mempercantik isi artikel yang akan ditayangkan pada halaman website.
Gambar 10 Halaman View Artikel Dari Sisi Penulis Untuk melihat tampilan tulisan dari sisi penulis, sistem telah memberikan fitur view articel yang tampilannya sama dengan tampilan tulisan pada halaman utama website.
Fitur ini dapat digunakan untuk mengelola satu postingan diantaranya melakukan editing artikel atau menghapus artikel.
Gambar View Article sesuai pada gambar 10.
Journal Informatics NIVEDITA | 16 Vol.
No.
Desember 2024
ISSN 3089-8366
(Media Onlin.
Halaman Blog Halaman blog yang diakses dari sisi pembaca sesuai pada gambar 11, pada halaman ini ditampilkan seluruh tulisan yang telah dibuat oleh semua penulis.
Terdapat menu Author untuk melihat daftar penulis pada blog ini, serta menu Categories untuk melihat kelompok Tulisan apa saja yang ada pada website blog.
Selain itu 2 menu ini jika diakses dan memilih salah satu penulis atau kelompok tulisan akan mengarahkan pembaca ke halaman yang hanya menampilkan artikel sesuai dengan penulis atau kelompok tulisan tertentu.
Fitur ini akan memudahkan pembaca jika ingin melihat artikel berdasarkan kelompok tulisan atau berdasarkan oleh salah satu penulis.
Gambar 11 Tampilan Utama Website Blog Pencarian Fitur pencarian dapat digunakan oleh pembaca artikel jika ingin mencari artikel yang lebih spesifik berdasarkan kata kunci yang diinputkan pada kolom pencarian.
Hasil pencarian dari kata kunci yang AuliburanAy sesuai pada gambar 12 menampilkan beberapa artikel yang berisi tentang kata kunci tersebut baik di dalam Judul Artikel atau di dalam Isi artikel yang ada pada website ini.
Fitur ini tentunya akan memberikan manfaat yang banyak bagi pembaca artikel.
Gambar 12 Hasil Pencarian Berdasarkan Kata Kunci AyLiburanAy Journal Informatics NIVEDITA | 17 Vol.
No.
Desember 2024
ISSN 3089-8366
(Media Onlin.
Selain fitur pencarian, website ini sudah dilengkapi fitur untuk menampilkan artikel-artikel berdasarkan Penulis tertentu atau berdasarkan kelompok tulisan tertentu.
Tampilan fitur ini sesuai pada Gambar 13 Tampilan Artikel Berdasarkan Salah Satu Penulis Pengujian Sistem Metode pengujian sistem menggunakan metode Black Box Testing, pengujian dilakukan terhadap sistem yang telah siap untuk dipublikasikan.
Pengujian sistem menggunakan 18 Jenis pengujian, yang terdiri dari Pengujian dari sisi Author dan dari sisi pembaca.
Pengujian sistem dilakukan terhadap kemampuan sistem dalam menghandle registrasi user, proses login, penginputan berita, pengelolaan berita, pencarian berita berdasarkan judul, pencarian berita berdasarkan author, pencarian berita berdasarkan Secara terperinci hasil pengujian sistem sesuai pada tabel 1.
Tabel 1 Hasil Pengujian Black Box Testing No.
Jenis User Jenis Pengujian Author Registrasi User Author Login Sistem, masuk ke dashboard penulis Author Mencoba Menu My Post Author Menambahkan.
Editing dan Deleting Artikel Author Mencoba menu Category Author Menambahkan.
Editing dan Deleting Category Artikel Ekspektasi Sistem berhasil menyimpan data user dan mengarahkan pengguna ke halaman Sistem berhasil melakukan proses login menggunakan email dan password dan mengarahkan ke dashboard penulis Sistem berhasil menampilkan halaman pengelolaan Artikel Sistem berhasil menyimpan data article baru, menyimpan data perbaikan artikel ke database sistem dan menghapus data artikel dari database sistem serta mengarahkan kembali ke halaman My Post Sistem mampu menampilkan data seluruh category yang telah ada di database sistem Sistem berhasil menyimpan data category baru, menyimpan data perbaikan category ke database sistem dan menghapus data category dari Hasil Pengujian Valid Valid Valid Valid Valid Valid Journal Informatics NIVEDITA | 18 Vol.
No.
Desember 2024
ISSN 3089-8366
(Media Onlin.
No.
Jenis User Jenis Pengujian Mencoba menu View Blog Mencoba menu My Profile Author Author Author Memperbaiki data pada halaman My Profile Author Mencoba menu Logout Author Mencoba menu Dashboard pada Halaman Utama Website User/Pembaca User/Pembaca User/Pembaca User/Pembaca Melihat Detail Artikel User/Pembaca Menampilkan Artikel Berdasarkan Penulis User/Pembaca Menampilkan Artikel Berdasarkan Category User/Pembaca Mencoba Fitur Pencarian Mengakses halaman Mengakses halaman Authors Mengakses halaman Categories Ekspektasi database sistem serta mengarahkan kembali ke halaman My Post Mengarahkan penulis ke halaman utama Sistem berhasil menampilkan data Sistem berhasil menyimpan data hasil perubahan ke database sistem dan mengarahkan kembali ke halaman My Profile Sistem berhasil menjalankan fitur Logout dan mengarahkan sistem kembali ke halaman login Sistem berhasil mengarahkan author kembali ke halaman Dashboard penulis Sistem berhasil menampilkan halaman utama yang berisi seluruh postingan dari semua penulis Sistem berhasil menampilkan halaman daftar penulis Sistem berhasil menampilkan halaman seluruh daftar Category Sistem mampu menampilkan halaman yang menampilkan artikel secara Sistem mampu menampilkan halaman yang berisikan artikel-artikel dari salah satu Penulis Sistem mampu menampilkan halaman yang berisikan artikel-artikel dari salah satu Cateogory Sistem mampu menampilkan artikel berdasarkan kata kunci yang diinputkan oleh pembaca pada halaman pencarian Hasil Pengujian Valid Valid Valid Valid Valid Valid Valid Valid Valid Valid Valid Valid Berdasarkan kepada hasil pengujian sistem menggunakan metode Black Box Testing, didapatkan hasil 100% valid.
Merujuk pada hasil tersebut, bahwa sistem sudah sesuai dan dapat digunakan dengan baik oleh pengguna nantinya.
KESIMPULAN
Rancangan dan pembangunan blog berita berbasis Laravel dan Tailwind berhasil dilakukan dengan baik, menggabungkan kekuatan framework Laravel untuk pengelolaan data dan routing, serta Tailwind CSS yang memberikan desain antarmuka yang responsif dan estetis.
Selama proses pengujian menggunakan metode Black Box Testing dengan 18 butir pengujian yang mencakup berbagai aspek fungsionalitas dan penggunaan dari sisi penulis dan pembaca, sistem berhasil memperoleh hasil 100% valid, yang menunjukkan bahwa seluruh fitur yang diujikan berfungsi sesuai dengan ekspektasi dan tanpa adanya kesalahan.
Hal ini mengindikasikan bahwa sistem yang dibangun sudah memenuhi standar kualitas dan dapat diandalkan sebagai platform untuk menyajikan berita dengan performa yang stabil dan userfriendly.
Dengan hasil pengujian yang sangat memuaskan, blog berita ini siap untuk diimplementasikan dan digunakan oleh pengguna.
Journal Informatics NIVEDITA | 19 Vol.
No.
Desember 2024
ISSN 3089-8366
(Media Onlin.
SARAN Saran yang dapat disampaikan dari hasil blog ini adalah kedepannya dapat dikembangkan fitur sidebar untuk keperluan penempatan promosi atau iklan, sehingga kedepannya dapat menghasilkan income bagi institusi pengguna.
Selain itu fitur compress pada media gambar belum ditambahkan pada blog ini, sehingga kedepannya dapat membuat media penyimpanan pada server akan lambat laun terkuras.
Bagi pengguna, blog ini sudah sangat responsive digunakan dalam berbagai media smartphone ataupun PC, namun belum terdapat fitur penampilan artikel dalam bentuk Video.
UCAPAN TERIMA KASIH
Terima Kasih Penulis ucapkan kepada Tim Journal Informatics Nivedita atas diterimanya artikel ini, karena kami diberikan kesempatan untuk berkontribusi dengan menulis artikel ini.
Walaupun artikel ini masih jauh dari kata sempurna.
DAFTAR PUSTAKA