LAPORAN Pembuatan Web

LaporanPembuatan Web
Nama Kelompok:4
Nama AnggotaKelompok:
Gifarly Muhammad Afdalash
Muh Nur Fadlan
Agusta Indra Kusuma Putra
Bagas ZainulMuttaqin
SMKN 4 KENDARI 2023

KATA PENGANTAR
Pujisyukur kami panjatkanTuhan yang

mahaesa,karenaatasberkah,rahmat,dankarunianya,pe
nyusunanlaporaninitentangpembrograman website
,kopetensikeahlianRekayasaPerangkatlunak,dapatdis
elesaikan.
Dalammakalahini di
sajikanbeberapapembahasanmaterimengenaiXAMP
P DAN PERANCANGAN APLIKASI ,dan di
laporaninimemiliki coding di
sertaicontohuntukmempermudahsiswa/siswidalamm
emahamipembahasanmateri.
Ucapanterimahkasih kami
sampaikankepadasemuaanggotakelompok yang
telahmembantumenyelesaikanlaporantersebutsehing
gadapat di sajikandenganbaik
DAFTAR ISI
COVER…………………………………………………………………………
KATA …………………………………………………………………………
DAFTAR ISI ……………………………………………………………………
BAB I PENDAHULUAN………………………………………………………
A.LatarBelakangMasalah……………………………………………
B.RumusanMasalah……………………………………………
C.TujuanMasalah……………………………………………
BAB II
PEMBAHASAN………………………………………………………………
A.Xampp……………………………………………
B.Bootstrap……………………………………………
C.Codeigniter……………………………………………
D.Php……………………………………………
BAB III PERANCANGAN APLIKASI…………………………………………

A.InstalasiXampp……………………………………………
B.Instalasi Composer……………………………………………
C.Instalasi Git……………………………………………
D.InstalasiCodeigniter……………………………………………
E.PemasanganBoostrapKeCodeigniter…………………………………
F.Perkodingan……………………………………………
BAB IV PENUTUP……………………………………………
A.Kesimpulan……………………………………………
B.Saran……………………………………………
Daftar Pustaka……………………………………………
BAB 1 PENDAHULUAN
A.LatarBelakangMasalah
Website adalah media yang digunakanuntukmenampung data teks,

gambar, suara, dan animasi yang dapatditampilkan di internet dan dapat
diakses oleh komputer yang terhubungdengan internet secara global.
Website merupakan media informasiberbasisjaringankomputer yang dapat
diaksesdimanasajadenganbiayarelatifmurah. Website merupakanbentuk
implementasidaribahasapemograman web (web programming). PHP
(Hypertext Preprocessor) merupakanbahasapemogramanberbasis web
yang memilikikemampuanuntukmemproses dan mengolah data secara
dinamis
B.Rumusan Masalah
-Apakah yang dimaksud dengan website?
-Apa saja komponen dalam perancangan website?
-Bagaimanakah cara memasukkan bootstrap ke codeigniter?
-Apa saja kelebihan dan kelemahan XAMPP dalam perancangan website?
-Apa saja fitur codeigniter dan contoh penggunaannya?
C.Tujuan Masalah
-Menjelaskan apa itu website
-Menjabarkan komponen yang diperlukan dalam perancangan website
-Menjelaskan langkah langkah memasukkan bootstrap sampai ke codeigniter
-Menjabarkan kelebihan dan kelemahan XAMPP dalam perancangan website
-Menjelaskan fitur codeigniter dan cara penggunaannya
BAB II PEMBAHASAN
A.Xampp
PengertianXampp
XAMPP adalahsebuahpaketperangkatlunak (software) komputer yang

sistempenamaannyadiambildariakronim kata Apache, MySQL (dulu) / MariaDB
(sekarang), PHP, dan Perl. Sementaraimbuhanhuruf “X” yang terdapat pada awal kata
berasaldariistilah cross platform sebagaisimbolbahwaaplikasiinibisadijalankan di
empatsistemoperasiberbeda, seperti OS Linux, OS Windows, Mac OS, dan juga Solaris.
Komponen-komponenXAMPP
XAMPP mempunyai 5 komponenyaitusebagaiberikut:
 X = Cross Platform
Merupakankodepenandauntuk software cross platform atau yang bisaberjalan di

banyaksistemoperasi. Jadi, ada XAMPP untuk Windows, xampp for mac, dan untuk
Linux. Semuaitubersifat free download xampp.
 A = Apache
Apache adalahaplikasi web server yang bersifat gratis dan bisadikembangkan oleh
banyak orang (open source).
 M = MySQL / MariaDB
MySQL atau MariaDB merupakanaplikasi database server yang dikembangkan oleh

orang yang sama. MySQL berperandalammengolah, mengedit, dan menghapus daftar
melalui database.
 P = PHP
Huruf “P” yang pertamadariakronim kata XAMPP

adalahinisialuntukmenunjukkaneksistensibahasapemrograman PHP. Bahasa
pemrogramaninibiasanyadigunakanuntukmembuat website dinamis, contohnyadalam
website berbasis CMS WordPress.
P = Perl
Sementaraitu, untukhuruf P selanjutnyamerupakansingkatandaribahasapemrograman

Perl yang kerapdigunakanuntukmemenuhiberbagaimacamkebutuhan. Perl
inibisaberjalan di dalambanyaksistemoperasisehingga sangat fleksibel dan
banyakdigunakan.
Fungsi XAMPP
Program aplikasi XAMPP berfungsisebagai server
lokaluntukmengampuberbagaijenis data website yang sedangdalam proses
pengembangan.Dalamprakteknya, XAMPP
bisadigunakanuntukmengujikinerjafiturataupunmenampilkankonten yang adadidalam
website kepada orang lain tanpaharusterkoneksidengan internet,
cukupaksesmelaluiXampp control panel, atauistilahnya website
offline.XAMPPbekerjasecara offline layaknya web hosting biasanamuntidakbisadiakses
oleh banyakorang.Makadariitu, XAMPP biasanyabanyakdigunakan oleh para
mahasiswamaupunpelajaruntukmelihathasildesain website sebelumakhirnyadibuat online
menggunakan web hosting yang biasadijualdipasaran.
Kelebihan XAMPP
Kelebihan XAMPP antara lain:
 Database Storage Engine inibanyakdigunakan oleh programmer apalagi oleh

web developer karenasifatnya yang free. Untuk yang expert sudahada yang
bayar.
 Kemampuannyasudahbisadiandalkan, mempunyaikapasitas yang
cukupmumpunisekitar 60.000 tabeldenganjumlah record mencapai
5.000.000.000 bahkanuntuk yang terbarusudahlebih.
 KeamanandatanyacukupamanwalaupuntidaksehebatPostgreapalagi Oracle.
 Engine ini multiplatform sehinggamampudiaplikasikan di
berbagaisistemoperasi. My Sqlcocokdiaplikasikandiaplikasikelaskecil dan
menengah.
 Kelebihan paling utama engine iniadalahkecepatannya.
Kekurangan XAMPP
Kekurangan XAMPP antara lain:
 Tidakcocokuntukmenangani data denganjumlah yang besar,

baikuntukmenyimpan data maupununtukmemproses data.
 Memilikiketerbatasankemampuankinerja pada server ketika data yang
disimpantelahmelebihi batas maksimalkemampuandayatampung server
karenatidakmenerapkankonsep Technology Cluste
B.Bootstrap
 Pengertian Bootstrap
Bootstrap adalah framework web development berbasis HTML, CSS, dan JavaScript
yang dirancanguntukmempercepat proses pengembangan web responsive dan mobile-first
(memprioritaskanperangkatseluler), Selainbisadigunakanuntukmengembangkan
websitedenganlebihcepat, Bootstrap adalah framework gratis yang bersifat open-source.
Skrip dan syntax yang disediakan Bootstrap
bisaditerapkanuntukberbagaikomponendalamdesain web.
 Fungsi Bootstrap
Tujuan dan fungsi Bootstrap adalahuntukmembuat website responsive dan mobile-

first. Jadi, semuaelemenantarmuka website dipastikanbisabekerjasecara optimal di
semuaukuranlayar, baik desktop maupunperangkatseluler.
 Keunggulan Bootstrap
Keunggulandalamcaramenggunakan Bootstrap adalahsifatnya yang responsif. Sifat

responsifinibisadigunakanuntukmenguji situs web yang barudibuat pada
beberapaperangkat, sepertiponsel, komputer, dan lainnya. Kebutuhan situs web yang
responsifadalahsebuahkeharusan, sehinggamenggunakan Bootstrap merupakanpilihan
yang tepat. DikutipdariDigital Mad, Bootstrap dapatmenyesuaikan tata letak situs web
yang akanditampilkan.Bootstrap juga bisamempercepatpengerjaandesainweb dan
meningkatkanalurkerjapengembangnya. Hal itudikarenakan Bootstrap mudahdisesuaikan,
Denganmenggunakan Bootstrap, penghapusan CSS maupun JavaScript yang
tidakdiperlukandapatdilakukandengancepat.
 Kelemahan Bootstrap
Selainkeunggulan, Bootstrap juga memilikikelemahan. MengutiplamanCareer

Foundry, Bootstrap memilikisintaks yang membingungkansehinggacukupmenyulitkan
para programmer. Selainitu, Bootstrap juga berukuran sangat besar. Hal
inidapatmengakibatkanwaktuuntukload situs web menjadilebihlambat dan berat.
C.Codeigniter
 PengertianCodeigniter
Codeigniteradalah salah satuframeworkpopulerkhususapplication dan

webdevelopmentberbasisModel-View-Controller (MVC). Hadirsebagaiplatform open-
source, codeigniterbanyakdigunakandeveloper
untukmengembangkanwebsitedenganbahasapemrograman PHP.
Tujuanpenggunaanframework codeigniteryaituuntukmempercepat dan
mempermudahpengembangmenyelesaikanproyek.
 FungsiCodeigniter
Fungsi CodeIgniter yaitusebagaiberikut:
1. Mempercepat dan mempermudahkitadalampembuatan website.

2. Menghasilkanstrukturpemrograman yang sangat rapi,
baikdarisegikodemaupunstruktur file phpnya.
3. Memberikanstandar coding sehinggamemudahkankitaatau orang lain
untukmempelajarikembali system aplikasi yang dibangun.
 KelebihanCodeigniter
Kelebihan CodeIgniter yaitusebagaiberikut:
1. Berukuran sangat kecil. File download nyahanyasekitar 2MB,

itupunsudahincludedokumentasinya yang sangat lengkap.
2. Dokumentasi yang bagus. Saatandamendownloadnya,
telahdisertakandengandokumentasi yang berisipengantar, tutorial,
bagaimanapanduanpenggunaan, sertareferensidokumentasiuntukkomponen-
komponennya.
3. Kompitabilitasdengan Hosting. CodeIgniter mampuberjalandenganbaik pada
hampirsemuaplatfom hosting. CodeIgniter juga mendukung database-
database paling umum, termasuk MySQL.
 Kekurangancodeigniter
Kekurangan CodeIgniter yaitusebagaiberikut:

1. CodeIgniter tidakditujukanuntukpembuatan web denganskalabesar.
2. Library yang sangat terbatas. Hal inidikarenakan sangat sulitmencari plugin
tambahan yang terverifikasisecararesmi, karena pada situsnya CodeIgniter
tidakmenyediakan plugin-plugin
tambahanuntukmendukungpengembanganaplikasidengan CI.
3. Belum adanya editor khusus CodeIgniter, sehinggadalammelakukan create
project dan modul-modulnyaharusberpindah-pindah folder.
 Fitur-fiturcodeigniter
Fitur-fiturCodeigniteryaitu:
1. MVC
Fitur utama yang dianggapmembesarkannama CodeIgniter adalah MVC atau

Model-View-Controller
architecture.MVCinimerupakanpraktikstandarindustrisaatbekerjadenganaplikasi
web. MVC berfungsiuntukmemisahkan data, logikabisnis, dan
presentasidalamaplikasi.
2. Built-in-library
Fitur berikutnya yang menjadikeunggulandari CodeIgniter dariframework PHP

lainnyaadalahbuilt-in-library.Didalambuilt-in-library ini,
penggunabisamenemukanberbagaisolusiterkaitcoding, sertabuku, tutorial dan
petunjukpenggunaanmenarikseputar CodeIgniter.Ini berartitantanganapa pun yang
kamumiliki, kemungkinanbesarseseorangtelahmengalamimasalahtersebut,
menyelesaikannya, dan menempatkansolusinyauntukmudalambuilt-in-
library.Dalam kata lain, developer CodeIgniter memilikidokumentasi yang
lengkapmengenaicarakerjasistemaplikasiciptaannyasertaseputar dunia
development PHP.
3.Extremely light weight
Penggunacenderungmenyukaiaplikasi yang dapatdimuatdengan sangat

cepat.Nah, jikapernahbekerjadenganbeberapaframework modern,
kamuakanmenyadaribahwamerekamembutuhkanwaktukurangdarisatudetikuntukm
emuatsetelahinstalasi. Sementaraitu, CodeIgniter dapatdimuat oleh device
dalamwaktukurangdari 50 milisekon. Waktu ekstra yang
biasanyadihabiskanuntukoptimalisasiseperti yang terjadi di framework lain
dibebaskansaatkamubekerjadenganCodeIgniter.Fitur yang
memungkinkankecanggihaninidisebut juga dengan “Extremely light weight”.
4.Source code yang kecil
Fitur selanjutnya yang dapatdimanfaatkandariframework CodeIgniter

adalahsource code yang kecil.Seluruhsource codedalamframework CodeIgniter
hanyamendekati 2MB.Ukuran inimemudahkanpenggunauntukmenguasai
CodeIgniter dan sistemkerjanya. Tak hanyaitu, source code yang kecil juga
secaratidaklangsungmenyederhanakanpenerapan dan pembaruansistemaplikasi.
D.Php
 PengertianPhp
PHP Adalah bahasa scripting server-side, Bahasa pemrograman yang
digunakanuntukmengembangkan situs web statis atau situs web dinamisatauaplikasi Web.
PHP singkatandariHypertext Pre-processor, yang sebelumnyadisebutPersonal Home
Pages.Script sendirimerupakansekumpulaninstruksipemrograman yang ditafsirkan pada
saat runtime. Sedangkan Bahasa scripting adalahbahasa yang menafsirkanskripsaat
runtime. Dan biasanyatertanamkedalamlingkunganperangkatlunaklain.
 FungsiPhp
Fungsi PHP adalahmembuatataumengembangkan situs web statis atau situs web
dinamisatauaplikasi Web, PHP juga dapatdigunakanuntukmembuat website
dinamisbisadigunakanuntukmenyimpan data kedalam database, membuathalaman yang
dapatberubah-ubahsesuaidengan input user, memproses form, dll.
 Syntax Php
Pengertian Syntax PHP adalahaturanpenulisan agar mampudimengertidenganbenar
oleh compiler saatmembacabahasapemrograman. Dalampenulisan PHP yang
benardiawalidengan “<?php” dan diakhiridengan “?>”. Dan di dalam File PHP juga
dapatberisi tag seperti HTML dan skripsisiklienseperti JavaScript.
ContohPenulisan Syntax PHP yang Benaryaitu:
<?php
echo ‘Hello World’ ;
?>
 KelebihanPhp
KelebihanPhpyaituantara lain:
 Bersifat Open Source
Bahasa PHP dapatdiakses oleh semua orang denganmelakukan download dari

open source dan mendapatkannyadengan gratis. IniartinyaAnda
dapatmelakukandownload dimanapun dan
akansiapuntukdigunakandalammengembangkan website.
 Lebihfleksibel
Bahasa ini sangat fleksibel,dimana Anda

dapatdenganmudahmengkombinasikanfungsi yang
adadenganbahasapemrogramanlainnya. Anda juga dapatmenggunakan packages yang
merupakanteknologi yang efektifuntuksetiapfiturnya.
 Pemuatan yang lebihcepat
Anda dapatdenganmudahmemuataplikasiberbasis PHP dan

menghubungkannyake database. Developer
menggunakannyakarenamemilikikecepatanpemuatan yang cepatmeskipunkoneksi
internet lambat.
 Lebihstabil
Karena bersifat open source, artinyasemua orang

dapatikutmembantumengembangkanbahasapemrogramaninimenjadilebihbaik yang
membuat PHP sangat stabilselamabertahun- tahun dan
dapatmemberikandukunganberkelanjutan.
 Koneksike database yang baik
Salah satukelebihanlainnyaadalahkoneksi database built-in yang

membantuuntukmenghubungkan database seperti MySQL, MariaDB, MongoDB,
dan sebagainyadimakakelebihhaniniakanmengurangiwaktudalampengembangan
website Anda.
 Membantumeningkatkanpeluangkerja
Dikarenakan PHP merupakanbahasapemrograman popular hinggasaatini,

banyakperusahaan yang mencari developer denganpengetahuanbahasaini yang mana
akanmendatangkanlowongankerjanyatersendiri.
 KekuranganPhp
KekuranganPhpyaituantara lain:
 Keamanan yang kurangterjamin
Bersifat open source belumtentubaikkarena PHP

darisegikeamanantidakcukupamankarenasemua orang dapatmelihat file teks ASCII
Anda yang tersediadenganmudah.
 Perfoma yang lemah
Sayangnya PHP tidakmendukungpenggunaanbanyakfiturdalamsatuwaktu. Jika

Anda mencobamenggunakanbeberapafiturdari framework atau tools tertentu,
makaakanmenyebabkanperfomansi yang buruksaat Anda
telahmengembangkanaplikasi online.
 Tidakadanyaaksesuntukmelakukanmodifikasi
Kekuranganlainnyaadalah PHP tidakmemberikanizinuntukmengubah behavior

inti dariaplikasi online. Sehinggajika Anda memilikibeberapafungsi yang
lebihkompleks, Anda mungkinmemerlukantambahanbahasapemrogramanlainnya.
 Cara melakukan Handling Error yang kurangtangguh
Banyak developer yang telahmenemukancelah pada code PHP

sehinggarentanterhadap handling error karenakurangnyaalatuntukmelakukan
debugging dan peringatan error. Anda mungkinakanmenemukanbeberapa bug pada
aplikasi Anda yang tidakterlihatletakkesalahannya,
sehinggamungkinakansedikitmenyulitkan Anda.
BAB III PERANCANGAN APLIKASI
A.InstalasiXampp
 3 Langkah Cara Instal XAMPP di Windows
Berikutadalahtigalangkahmudahuntukmenginstal XAMPP di komputer Anda:
1. Download XAMPP
Download XAMPP terbarumelalui website Apache Friends berikutini.
2. Instal XAMPP
1. Lakukaninstalasisetelah Anda selesaimengunduh. Selama proses

instalasimungkin Anda akanmelihatpesan yang menanyakanapakah Anda
yakinakanmenginstalnya. SilakantekanYesuntukmelanjutkaninstalasi.
2. KliktombolNext.
3. Pada tampilanselanjutnyaakanmunculpilihanmengenaikomponen mana dari
XAMPP yang ingin dan tidakingin Anda instal. Beberapapilihanseperti Apache
dan PHP adalahbagianpentinguntukmenjalankan website dan
akanotomatisdiinstal. Silakancentang MySQL dan phpMyAdmin,
untukpilihanlainnyabiarkansaja.
4. Berikutnyasilakanpilih folder tujuandimana XAMPP ingin Anda instal. Contohnya
di direktoriC:\xampp.
5. Pada halamanselanjutnya, akanadapilihanapakah Anda

inginmenginstalBitnamiuntuk XAMPP, dimananantinyadapat Anda
gunakanuntukinstall WordPress, Drupal, dan Joomla secaraotomatis.
6. Pada langkahini proses instalasi XAMPP akandimulai. SilakankliktombolNext.
7. Setelahberhasildiinstal, akanmunculnotifikasiuntuklangsungmenjalankan control

panel. SilakanklikFinish.
3. Jalankan XAMPP
Silakanbukaaplikasi XAMPP kemudiankliktombol Start pada Apache dan

MySQL. Jika berhasildijalankan, Apache dan MySQL
akanberwarnahijausepertigambar di bawahini.
B.Instalasi Composer
1. Download File Composer
Sebelummelakukaninstalasi, halpertama yang harusdilakukanadalahmengunduh file

Composer. setelahmengunduhkitaklik file tersebutlaluakanmunculgambarseperti di
bawahini.setelahmunculgambarseperti di bawahinikitaMemilihopsiinstal for all user
recomended
2. Install Composer
Setelahselesai download file Composer, buka file tersebut dan ikutiinstruksiinstalasi

di bawahini:Pertamaakanmunculhalamanseperti pada gambardibawahini.
KlikNextuntukmelanjutkanke proses instalasi.
3. Tentukan Lokasi File Instalasi
Selanjutnya Anda akandimintauntukmenentukanlokasi file php (php.exe) yang

akandigunakan pada command line (PHP CLI- Command Line
Interface).Filetersebutbiasanyaberada di dalam folder php. Jika Anda menggunakan
XAMPP, lokasi file iniakanberadadi C:\xampp\php. Pastikanpilihlokasiinstalasi
Composer berjalan di C:\xampp\php\php.exe. Klik Next apabilalokasi file
phpsudahbenar.
4. PilihPenggunaan Proxy
Kemudian Anda akandimintauntukmemilih, apakah Anda akanmenggunakan proxy

atautidak. Jika Anda inginmenggunakan proxy, klikcentang dan masukkan URL
proxy Anda. Apabila Anda tidakinginmenggunakan proxy, langsungklik Next
untukmelanjutkaninstalasi.
5. Review Lokasi Instalasi
Selanjutnyapastikankalau proses instalasiberjalan di lokasi file yang seharusnya,

yaitu C:\xampp\php\php.exe. Jika sudahbenar, klik Install.
6. InstalasiSelesai
Proses instalasiselesai, klikFinishuntukmenutupjendelainstalasi Composer.

C.Instalasi Git
 Sebelummelakukaninstalasi, halpertama yang harusdilakukanadalahmengunduh file

Git terlebiihdahulu.setelahpengunduhanselesaiklik file instaler Git yang sudahdiunduh.
 Setelahitumakaakanmunculinfomasilisensi Git, klikNext untukmelanjutkan.

 Selanjutnyamenentukanlokasiinstalasi. Biarkansajaapaadanya, kemudianklikNext
 Selanjutnyapemilihankomoponen, biarkansajasepertiinikemudianklikNext
 elanjutnyapemlilihandirektori start menu, klikNext
 SelanjutnyapengaturanPATHEnvironment. Pilih yang tengah agar perintah git dapat di

kenali di Command Prompt (CMD). SetelahituklikNext
 Selanjutnyakonversiline ending. Biarkansajasepertiini, kemudianklikNext
 Selanjutnyapemilihan emulator terminal. Pilihsaja yang bawah, kemudianklikNext

 Selanjutnyapemilihanopsiekstra. KliksajaNext.
 Selanjutnyapemilihanopsiekspreimental,
langsungsajaklikInstalluntukmemaulaiinstalasi.
 Tunggubeberapasaat, instalasisedangdilakukan.
 Setelahselesai, kitabisalangsungklikFinish.
D.InstalasiCodeigniter 4
1. Untukmelakukaninstalasi manual, download file zip dari CodeIgniter 4 melalui
website resminya.
2. Setelah file CodeIgniter 4 berhasilterdownload, pindahkan file ke

folder C:/xampp/htdocs. Kemudian, extract file zip tersebut dan
ubahnamanyasesuaidengannama project yang Anda inginkan. Di tutorial ini, kami
menggunakannama ci4.
3. Project CodeIgniter inisudahbisalangsungdijalankan di web browser Anda
denganmengakses localhost/ci4/public. Tapi, janganlupajalankandulu XAMPP-nya,
ya.
E.PemasanganBoostrapKeCodeigniter 4
 .Setelahberhasilmenginstall framework Codeigniter 4 pada web server, kemudian
download juga template bootstrap dan disinisayamenggunakanDalam project CI pada
folder “public” buatlahsatu folder dengannama “assets”, lalukopikan folder dan file
pendukung template GentelellaAlela! seperti folder “build”, folder “images”, folder
“src”, serta folder “vendors” kedalam folder “assets” yagtelahkitabuatsebelumnya.
Sehinggasusunanfoldernyaakantampaksepertiberikut.
 Lalu buatlahsatubuah folder dengannama “template” pada folder “app/Views” dan kopi
salah satu file index.html dari folder master template GentelellaAlela! dan letakkan
pada folder “app/Views/template”, dan ubahlah file tersebutsertaextensimenjadi file
“_template.php”, sehinggastrukturpeletakkan file template
akantampaksepertidibawahini.
 Kemudiancari tag yang berisikan tag untukmeload file CSS dan JavaScript <link
href=”../vendors/bootstrap/dist/css/bootstrap.min.css”
rel=”stylesheet”> laluubahlahmenjadi <link href=”<?php
echobase_url();?>/public/assets/vendors/bootstrap/dist/css/bootstrap.min.css”
rel=”stylesheet”> seperti yang terlihat pada gambarstruktur template diatas.
 Langkah selanjutnyaadalahmemanggil file template yang telahkitasiapkantadi, buka
file controller “Home.php” pada folder “app/Controllers/Home.php”, pada method
index() kitapanggil file template dengankodedibawahini:
<?php namespace App\Controllers;
class Home extends BaseController
public function index()

{
return view('template/_template');
}
 Jika tahap demi tahapdiatassudahkitalalui, tahapselanjutnyaadalahkitamelakukan
testing apakah template sudahterintegrasidenganbaik, buka browser Anda laluakses
project kerja Anda
melaluialamat localhost/namaproject/public/,jikaberjalandenganbaikmakaakanterlihath
asilnyasepertigambardibawahini:
F.Percodinganview,controlerr,models
 Halaman Dashboard
a.View
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="utf-8"/>
5. <linkrel="icon"href="/favicon.ico"/>
6. <metaname="viewport"content="width=device-width, initial-scale=1"/>
7. <metaname="theme-color"content="#000000"/>
8. <title>Desktop - 1</title>
9. <linkrel="stylesheet"href="https://fonts.googleapis.com/css?
family=Lekton%3A700"/>
family=Source+Sans+Pro%3A400%2C500%2C700"/>
family=Inter%3A400%2C500"/>
12. <linkrel="stylesheet"href="./styles/desktop-1.css"/>
13. 
14. <linkrel="stylesheet"href="./css/bootstrap.min.css"/>
15. <linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/
css/bootstrap.min.css"rel="stylesheet"integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/
Jr59b6EGGoI1aFkw7cmDA6j6gD"crossorigin="anonymous">
16. </head>
17. <body>
18.
19. <divclass="desktop-1-NnE">
20. <divclass="header-FzS">
21. <divclass="group-40-VQv">
22. <divclass="rectangle-25-qt6">
23. </div>
24. <divclass="rectangle-26-cXU">
25. </div>
26. </div>
27. <navclass="frame-89-pNe">
28. <divclass="nav-bar-xtA">
29. <divclass="auto-group-t634-zZx">
30. <astyle="text-decoration:none"href="<?php echo base_url('/') ?
>" class="gudang-pustaka-1V4">Gudang Pustaka</a>
31. <divclass="group-1000001624-wZ4">
32. </div>
33. </div>
34.
35.
36. <astyle="text-decoration:none"href="<?php echo
base_url('/pengelola') ?>" class="button-find-loan-3XY">
37. <spanclass="group-1000001625-Mo8">Pengelola</span>
38. </a>
39.
40.
41. </div>
42. <imgclass="mask-group-uy4"src="./assets/mask-group.png"/>
43. </nav>
44. <divclass="container">
45. <divclass="row">
46. <pclass="dibuat-untuk-memudahkan-orang-orang-untuk-melakukan-
peminjaman-bukumelihat-buku-yang-tersedia-diperpustakaan-anda-xAe">
47. Dibuatuntukmemudahkan orang
oranguntukmelakukanpeminjamanbuku,melihatbuku yang
tersediadiperpustakaananda
48. <br/>
49.
50. <br/>
51.
52. </p>
53. <astyle="text-decoration:none"href="<?php echo base_url('/login')
?>" class="button-demo-j4v">
54. <pclass="daftar-xTU">Login</p>
55. <imgclass="arrow-right-2-16px-1-qnA"src="./assets/arrow-right-
2-16px-1.png"/>
56. </a>
57. <imgclass="pngtreelibrary-reading-student5420476-1-Jfk"src="./
assets/pngtreelibrary-reading-student5420476-1.png"/>
58. </div>
59. </div>
60. </div>
61.
62.
63. </div>
64. 
65. <scriptsrc="./js/bootstrap.min.js"></script>
66. <scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/
bootstrap.bundle.min.js"integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"crossorigi
n="anonymous"></script>
67. </body>
68.
69. </html>
b.Controller
1. <?php
2.
3. namespaceApp\Controllers;
4.
5. classHome extendsBaseController
6. {
7. publicfunctionindex()
8. {
9. returnview('welcome_message');
10. }
11. }
 Halaman Login
a.View
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="utf-8"/>
5. <linkrel="icon"href="/favicon.ico"/>
6. <metaname="viewport"content="width=device-width, initial-scale=1"/>
7. <metaname="theme-color"content="#000000"/>
8. <title>Desktop - 2</title>
9. <linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Lekton
%3A700"/>
family=Source+Sans+Pro%3A400%2C500%2C700"/>
11. <linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Inter
%3A500"/>
12. <linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Itim
%3A400"/>
13. <linkrel="stylesheet"href="./styles/desktop-2.css"/>
14. 
15. <linkrel="stylesheet"href="./css/bootstrap.min.css"/>
16. <linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/
bootstrap.min.css"rel="stylesheet"integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/
Jr59b6EGGoI1aFkw7cmDA6j6gD"crossorigin="anonymous">
17.
18. </head>
19. <body>
20. <divclass="desktop-2-bAJ">
21. <divclass="header-6Mx">
22. <divclass="auto-group-kusv-bJi">
23. <divclass="group-40-WAn">
24. <divclass="rectangle-25-zbk">
25. </div>
26. <divclass="rectangle-26-J6e">
27. </div>
28. </div>
29. <divclass="group-89-Bw8">
30. <divclass="nav-bar-HUN">
31. <divclass="auto-group-b6uj-bzr">
base_url('/') ?>" class="gudang-pustaka-KAA">Gudang Pustaka</a>
33. <divclass="group-1000001624-yVc">
34. </div>
35.
36. </div>
37.
base_url('/pengelola') ?>" class="button-find-loan-Mea">
39. <spanclass="group-1000001625-teW">Pengelola</span>
40. </a>
41.
42. </div>
43. </div>
44. </div>
45. <divclass="auto-group-nqnw-FtN">
46. <imgclass="item-4957136-1-YsU"src="./assets/-65Y.png"/>
47. </div>
48. </div>
49. <?phpif (session()->has('Pesan')) : ?>
50. <divclass="alert alert-danger">
51. <?= session()->getFlashdata('Pesan') ?>
52. </div>
53. <?phpendif; ?>
54. <formaction="<?php echo base_url('/login/cek_login') ?>" method="post">
55. <divclass="login-component-F1C">
56. <inputclass="username-
YeW"type="text"name="nama"id="nama"placeholder="Nama">
57. <inputclass="username-
YeW"type="number"name="nis"id="nis"placeholder="Nis">
58. <inputclass="password-
Vy4"type="password"name="password"id="password"placeholder="Password">
59. <buttonclass="button"type="submit">
60. Login
61. </button>
62.
63. <divclass="auto-group-5fhk-VtW">
64. <pclass="dont-have-account-PU6">Belum Punya Akun?</p>
65. <astyle="text-decoration:none"class="sign-in-su4"href="<?php
echo base_url('/register') ?>" >
66. <span>Register</span>
67. </a>
68. </div>
69. </div>
70. </form>
71. </div>
72.
73. 
74. <scriptsrc="./js/bootstrap.min.js"></script>
75. <scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/
bootstrap.bundle.min.js"integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"crossorigi
n="anonymous"></script>
76. </body>
b.Model
1. <?php
2.
3. namespaceApp\Models;
4.
5. useCodeIgniter\Model;
6.
7. classMloginextendsModel
8. {
9. publicfunctionlogin($nama, $nis, $password)
10. {
11. return$this->db->table('tb_anggota')->where(
12. [
13. 'nama'=>$nama,
14. 'nis'=>$nis,
15. 'password'=>$password
16. ]
17. )->get()->getRowArray();
18. }
19.
20. publicfunctioninsertData($data)
21. {
22. $this->db->table('tb_anggota')->insert($data);
23. }
24. }
c.Controller
1. <?php
2.
3. namespaceApp\Controllers;
4.
5. useApp\Models\Mlogin;
6.
7.
8. classLogin extendsBaseController
9. {
10. protected$session;
11. protected$Mlogin;
12. publicfunction__construct()
13. {
14. $this->session = \Config\Services::session();
15. $this->Mlogin= newMlogin();
16. }
17.
18. publicfunctionindex()
19. {
20.
21. $validation= \config\Services::validation();
22. $data= [
23. 'validation'=>$validation
24. ];
25. returnview('halaman_login', $data);
26. }
27.
28. publicfunctionregister()
29. {
30. returnview('halaman_register');
31. }
32.
33. publicfunctioncek_pendaftaran()
34. {
35. if($this->validate([
36.
37. 'nama'=> [
38. 'rules'=>'required',
39. 'errors'=> [
40. 'required'=>'{field} wajibdiisi !',
41. ]
42. ],
43. 'kelas'=> [
45. 'errors'=> [
47. ]
48. ],
49. 'jurusan'=> [
51. 'errors'=> [
53. ]
54. ],
55. 'nis'=> [
57. 'errors'=> [
59. ]
60. ],
61. 'jeniskelamin'=> [
63. 'errors'=> [
65. ]
66. ],
67. 'password'=> [
69. 'errors'=> [
71. ]
72. ],
73. ])) {
74. $data= [
75. 'nama'=>$this->request->getPost('nama'),
76. 'kelas'=>$this->request->getPost('kelas'),
77. 'jurusan'=>$this->request->getPost('jurusan'),
78. 'nis'=>$this->request->getPost('nis'),
79. 'jeniskelamin'=>$this->request->getPost('jeniskelamin'),
80. 'password'=>$this->request->getPost('password'),
81. ];
82. $this->Mlogin->insertData($data);
83. session()->setFlashdata('daftar', 'PendafataranBerhasilSilahkan
Login !!');
84. returnredirect()->to(base_url('/register'));
85. } else{
86. $validation= \config\Services::validation();
87. returnredirect()->to(base_url('/register'))-
>withInput('validation', $validation);
88. }
89. }
90.
91. publicfunctioncek_login()
92. {
93. if($this->validate([
94. 'nama'=> [
96. 'errors'=> [
98. ]
99. ],
100.
101.
102. 'nis'=> [
104. 'errors'=> [
106. ]
107. ],
108. 'password'=> [
110. 'errors'=> [
112. ]
113. ]
114. ])) {
115. $nama= $this->request->getPost('nama');
116. $nis= $this->request->getPost('nis');
117. $password= $this->request->getPost('password');
118. $cek_login= $this->Mlogin->login($nama, $nis,
$password);
119. if($cek_login) {
120. session()->set('id_anggota',
$cek_login['id_anggota']);
121. session()->set('nama', $cek_login['nama']);
122. session()->set('nis', $cek_login['nis']);
123. session()->set('kelas', $cek_login['kelas']);
124. session()->set('jurusan', $cek_login['jurusan']);
125. session()->set('jeniskelamin',
$cek_login['jeniskelamin']);
126. $this->session->set('logged_in', true);
127. returnredirect()->to(base_url('/databuku'));
128. } else{
129. session()->setFlashdata('Pesan', 'Nis atau Password
salah !!');
130. returnredirect()->to(base_url('/login'));
131. }
132. } else{
133. session()->setFlashdata('errors', \config\
Services::validation()->getErrors());
135. }
136. }
137.
138. publicfunctionlogout()
139. {
140. session()->destroy();
142. }
143. }
Bab IV Penutup
A.Kesimpulan
Kesimpulan yang dapat diambil adalah sebagai berikut:
1. Pembangunan media berbasis website ini memudahkan bagi pengakses website

baik itu konsumen maupun user umum untuk memperoleh
informasi produk-produk yang ditawarkan oleh Boma Advertising, serta
fasilitas kemudahan yang diberikan kepada konsumen dalam melakukan
pemesanan secara online
2. Aplikasi website yang telah dibangun ini berhasil menampilkan berapa

info seperti profil, produk, tim kerja, portofolio, klien, karir, berita, serta
kotak saran yang ditujukan kepada pengakses website
3. Berdasarkan hasil questioner, responden menyatakan dengan adanya

membangun media berbasis website ini, konsumen dan masyarakat umum
pengguna internet dapat dengan mudah mendapatkan informasi seputar
layanan pemesanan yang ditawarkan.
B.Saran
Saran yang dapat diambil adalah sebagai berikut:
1. Pembuatan website ini masih sangat terbilang sederhana, terutama dari

segi tampilan dan segi keamanan, ada baiknya untuk tahap pengembangan
sistem baru diharapkan dibuat semenarik mungkin dan dikembangkan
lebih lanjut dengan tambahan informasi yang lebih lengkap lagi yang
pastinya bisa lebih bermanfaat bagi pengelola dan pengguna website
tersebut.
2. Perancangan website ini diharapkan bisa lebih interaktif agar informasi

yang diinginkan pengguna dapat lebih bermanfaat lagi.
3. Dengan adanya laporan tugas akhir yang telah dibuat dengan

menggunakan program PHP diharapkan perusahaan yang bersangkutan
dapat memanfaatkan program ini.
4. Diperlukan pemeliharaan aktualisasi data secara periodik terutama yang

berhubungan dengan database.
5. Dari sisi admin hendaknya menampilkan laporan pertanggung jawaban

kepada pimpinan perusahaan.
6. Agar website ini dapat ditampilkan dengan optimal maka diperlukan

adanya dukungan perangkat keras dan perangkat lunak yang memadai.
Daftar Pustka
Kadir, Abdul. Dasar Pemrograman WebDinamis Menggunakan PHP.
Yogyakarta: ANDI. 2002
Arbie. Manajemen Database dengan MySQL. Yogyakarta:ANDI. 2003

B. Syakur, Stendy. Aplikasi Web Database dengan Dreamweaver MXI.
Yogyakarta:ANDI. 2003
Fathansyah, Ir. Basis Data.Bandung:Informatika. 1999.
Hakim, Lukmanul dan Musalini, Uus.Cara Mudah Memadukan Web Design

dan Web Programming. Jakarta:ElexMedia Komputindo. 2004.
Imansyah, Muhammad. PHP dan MySQLUntuk Orang Awam.

Palembang:Maxikom. 2003.

LAPORAN Pembuatan Web

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

LAPORAN Pembuatan Web

Diunggah oleh

Hak Cipta:

Format Tersedia

LaporanPembuatan Web

Gifarly Muhammad Afdalash

Muh Nur Fadlan

Agusta Indra Kusuma Putra

SMKN 4 KENDARI 2023

Pujisyukur kami panjatkanTuhan yang

BAB III PERANCANGAN APLIKASI…………………………………………

Website adalah media yang digunakanuntukmenampung data teks,

XAMPP adalahsebuahpaketperangkatlunak (software) komputer yang

XAMPP mempunyai 5 komponenyaitusebagaiberikut:

Merupakankodepenandauntuk software cross platform atau yang bisaberjalan di

MySQL atau MariaDB merupakanaplikasi database server yang dikembangkan oleh

Huruf “P” yang pertamadariakronim kata XAMPP

Sementaraitu, untukhuruf P selanjutnyamerupakansingkatandaribahasapemrograman

Kelebihan XAMPP antara lain:

 Database Storage Engine inibanyakdigunakan oleh programmer apalagi oleh

 Tidakcocokuntukmenangani data denganjumlah yang besar,

Tujuan dan fungsi Bootstrap adalahuntukmembuat website responsive dan mobile-

Keunggulandalamcaramenggunakan Bootstrap adalahsifatnya yang responsif. Sifat

Selainkeunggulan, Bootstrap juga memilikikelemahan. MengutiplamanCareer

Codeigniteradalah salah satuframeworkpopulerkhususapplication dan

Fungsi CodeIgniter yaitusebagaiberikut:

1. Mempercepat dan mempermudahkitadalampembuatan website.

Kelebihan CodeIgniter yaitusebagaiberikut:

1. Berukuran sangat kecil. File download nyahanyasekitar 2MB,

Kekurangan CodeIgniter yaitusebagaiberikut:

Fitur utama yang dianggapmembesarkannama CodeIgniter adalah MVC atau

Fitur berikutnya yang menjadikeunggulandari CodeIgniter dariframework PHP

3.Extremely light weight

Penggunacenderungmenyukaiaplikasi yang dapatdimuatdengan sangat

Fitur selanjutnya yang dapatdimanfaatkandariframework CodeIgniter

ContohPenulisan Syntax PHP yang Benaryaitu:

echo ‘Hello World’ ;

Bahasa PHP dapatdiakses oleh semua orang denganmelakukan download dari

Bahasa ini sangat fleksibel,dimana Anda

 Pemuatan yang lebihcepat

Anda dapatdenganmudahmemuataplikasiberbasis PHP dan

Karena bersifat open source, artinyasemua orang

 Koneksike database yang baik

Salah satukelebihanlainnyaadalahkoneksi database built-in yang

Dikarenakan PHP merupakanbahasapemrograman popular hinggasaatini,

 Keamanan yang kurangterjamin

Bersifat open source belumtentubaikkarena PHP

 Perfoma yang lemah

Sayangnya PHP tidakmendukungpenggunaanbanyakfiturdalamsatuwaktu. Jika

Kekuranganlainnyaadalah PHP tidakmemberikanizinuntukmengubah behavior

 Cara melakukan Handling Error yang kurangtangguh

Banyak developer yang telahmenemukancelah pada code PHP

 3 Langkah Cara Instal XAMPP di Windows

Berikutadalahtigalangkahmudahuntukmenginstal XAMPP di komputer Anda:

Download XAMPP terbarumelalui website Apache Friends berikutini.

1. Lakukaninstalasisetelah Anda selesaimengunduh. Selama proses

5. Pada halamanselanjutnya, akanadapilihanapakah Anda

7. Setelahberhasildiinstal, akanmunculnotifikasiuntuklangsungmenjalankan control

Silakanbukaaplikasi XAMPP kemudiankliktombol Start pada Apache dan

1. Download File Composer

Sebelummelakukaninstalasi, halpertama yang harusdilakukanadalahmengunduh file

Setelahselesai download file Composer, buka file tersebut dan ikutiinstruksiinstalasi

3. Tentukan Lokasi File Instalasi

Selanjutnya Anda akandimintauntukmenentukanlokasi file php (php.exe) yang

Kemudian Anda akandimintauntukmemilih, apakah Anda akanmenggunakan proxy

5. Review Lokasi Instalasi

Selanjutnyapastikankalau proses instalasiberjalan di lokasi file yang seharusnya,