LAPORAN DESAIN WEB
PROJECT AKHIR SEMESTER DESAIN WEB
DISUSUN OLEH
NAMA : AKMAL SUTANSYAH
NIM : 2021573010002
KELAS : TI 1B
TEKNOLOGI INFORMASI DAN KOMPUTER
TEKNIK INFORMATIKA
POLITEKNIK NEGERI LHOKSEUMAWE
2021/2022
LEMBAR PENGESAHAN
Judul Praktikum : Tugas Project Akhir Desain Web
Nama : Akmal Sutansyah
Jurusan : Teknologi Informasi dan Komputer
Program Studi : Teknik Informatika
Buket Rata, 21 Juni 2022
Dosen Pembimbing
MAHDI, ST., M.CS
NIP. 19700802 199903 1 001
1
DAFTAR ISI
LEMBAR PENGESAHAN...........................................................................................1
DAFTAR ISI.................................................................................................................2
KATA PENGANTAR...................................................................................................2
BAB I.............................................................................................................................2
PENDAHULUAN.....................................................................................................2
A. Latar Belakang....................................................................................................2
B. Tujuan.................................................................................................................3
C. Dasar Teori.........................................................................................................3
BAB II...........................................................................................................................4
PERCOBAAN...........................................................................................................4
I. Membuat Started.................................................................................................4
II. Membuat Navbar................................................................................................5
III. Membuat Jumbotron.......................................................................................6
IV. Membuat Gelombang pada website................................................................7
V. Membuat tampilan about...................................................................................8
VI. Membuat tampilan photo................................................................................9
VII. Membuat tampilan kontak............................................................................10
VIII. Membuat tampilan footer..............................................................................11
BAB III........................................................................................................................12
PENUTUP................................................................................................................12
I. Kesimpulan.......................................................................................................12
2
KATA PENGANTAR
Puji syukur kami panjatkan kehadirat Allah swt.karena atas Nikmat dan
hidayah-Nya penulis dapat menyelesaikan Laporan Praktikum mata kuliah
Pemrograman Web.Tugas ini disusun untuk melengkapi dan memenuhi salah satu
tugas mata kuliah Pemrograman Web pada semester 2.
Dalam penulisan tugas ini, penulis mendapatkan bimbingan serta dukungan
dari berbagai pihak. Oleh karena itu pada kesempatan ini, Saya mengucapkan terima
kasih kepada semua pihak yang telah mendukung.Saya berharap Laporan yang telah
dibuat ini dapat menambah wawasan dan pengetahuan tentang Pemrogaman Web dan
cara bagaimana menggunakan HTML, CSS, dan PHP serta program program lain
yang mendukungnya Saya menyadari bahwa didalam laporan ini masih banyak
kekurangan-kekurangan yang harus di benahi dan diperbaiki.
Oleh karena itu kritik maupun saran yang membangun dari pembaca
senantiasa Saya terima demi penyempurnaan penulisan di masa yang akan
datang.Demikian tugas ini yang Saya buat semoga bermanfaat bagi kita semua.
Buket Rata, 21 Juni 2022
Penulis
AKMAL SUTANSYAH
NIM. 2021573010002
3
BAB I
PENDAHULUAN
A. Latar Belakang
Dalam dunia industri yang maju sangat pesat ini, tidak menutup kemungkinan
dari hasil karya sekumpulan manusia yang mempuyai suatu tujuan. Di masa yang
sudah canggih ini kita sering menggunakan Web (website atau situs) dapat
diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data
gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari
semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu
rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan
dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi informasi
website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilik
website.Bersifat dinamis apabila isi informasi website selalu berubah-ubah, dan
isi informasinya interaktif dua arah berasal dari pemilik serta pengguna website.
Contoh website statis adalah berisi profil perusahaan, sedangkan website
dinamis adalah seperti Friendster, Multiply, dll. Dalam sisi pengembangannya,
website statis hanya bisa diupdate oleh pemiliknya saja, sedangkan website
dinamis bisa diupdate oleh pengguna maupun pemilik. Website ini digunakan
untuk mencari tahu informasi yang kita butuhkan, bahkan kita bisa berkomunikasi
dengan orang lain pun lewat jejaring sosial. Di dalam kita berselancar di dunia
maya kita memerlukan browser untuk mencari informasi apa yang kita inginkan
di dunia maya. Lewat browserterdapat script – script yang di mengerti oleh
computer.Dan penulis membahasnya dalam laporan praktikum ini yaitu mengenai
HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets), dan
PHP(HyperText Preprocessor)
4
B. Tujuan
Tujuan dari praktikum ini adalalah sebagai berikut :
1. Tujuan dibuatnya laporan praktikum ini adalah untuk memenuhi tugas mata
kuliah Pemrograman Web dan untuk berbagi ilmu kepada para pembaca.
2. Mengimplementasikan bahasa pemrograman PHP (HyperText Preprocessor)
3. Dapat membuat dokumen HTML dengan menggunakan permainan warna
dan berbagai jenis tampilan teks
4. Dapat membuat halaman web dengan menggunakan kode HTML secara
sederhana
5. Memahami dan mengetahui :
a. Fungsi HTML pada pemrograman berbasis web
b. Struktur HTML pada pemrograman berbasis web
C. Dasar Teori
HTML merupakan singkatan dari Hypertext Markup Language.HTML
digunakan untuk membangun halaman web. HTML digunakan untuk melakukan
mark-up (penandaan) terhadap sebuah dokumen teks. Tanda tersebut digunakan
untukmenentukan format atau style dari teks yang ditandai halaman web
dibangun oleh kode-kode HTML.
HTML adalah bahasa markup yang umum digunakan.Kepopuleran HTML
disebakan karena HTML ini mudah digunakan. Pembuatan dokumen web dengan
HTML dapat dilakukan dengan mudah dan cepat. Dokumen web dapat tersaji
dengan cepat ke banyak pembaca di seluruh dunia sekaligus. HTML mudah
melakukan kontrol terhadap tampilan halaman web baik berupa teks, gambar,
suara, animasi maupun video.
5
BAB II
PERCOBAAN
I. Membuat Started
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>
A. Hasil
B. Analisa
Disini saya membuat started nya terlebih dahulu, untuk codding nya saya
mengcopy dari website Boostrap v5.1
Dan mengubah title menjadi (Portofolio saya)
6
II. Membuat Navbar
<nav class="navbar navbar-expand-lg navbar-dark shadow-sm fixed-top" style="background-color:
rgb(0, 47, 255)">
<div class="container">
<a class="navbar-brand" href="#">Akmal Sutansyah</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#photo">Photo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Kontak">Kontak</a>
</li>
</ul>
</div>
</div>
</nav>
A. Hasil
B. Analisa
Untuk navbar sama juga saya mengambil source code nya dari Boostrap v.51
Tiap tombol terdiri dari tombol Home, about, my photo dan kontak.
Dan tiap tombol bisa di klik dan akan berjalan otomatis sesuai perintah yang
diberikan.
Dan menulis nama saya sebagai logo dari web tersebut.
Untuk warna navbar nya saya menggunakan warna biru, berikut adalah
code/format untuk memanggil warna yang di tampilkan => "background-
color: rgb(0, 47, 255)"
7
III. Membuat Jumbotron
<!--Jumbotron-->
<section class="jumbotron text-center">
<img src="img/AKMAL.jpg" alt="Akmal Sutansyah" width="100" class="rounded-circle img-
thumbnail" />
<h2 class="display-4">Akmal Sutansyah</h2>
<p class="lead">Student | Polytechnic Negeri Lhokseumawe</p>
</section>
<!--akhir Jumbotron-->
A. Hasil
B. Analisa
Disini saya membuat Jumbotron, apa itu jumbotron ?
Jumbotron adalah sebuah komponen website yang disediakan
oleh bootstrap untuk menampilkan informasi utama atau informasi awal dari
sebuah website, bisa berbentuk gambar, seperti saya saya tampilkan di atas
ataupun, informasi lainnya yang berkaitan dengan website yang anda buat.
Tentukan ukuran untuk frame bingkai foto nya, disini saya menggunakan
ukuran width=’100’, dan membulatkan frame menjadi lingkaran setengah
sempurna = rounded-circle img-thumbnail"
Saya mengunakan foto saya yang ber format “img/AKMAL.jpg” , memberi
nama saya di bawah foto tersebut, Nama perguruan tinggi yang tempat saya
menuntut ilmu, dan posisi saya di perguruan tinggi tersebut yaitu sebagai
mahasiswa/Student.
8
IV. Membuat Gelombang pada website
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#ffffff"
fill-opacity="1"
d="M0,192L48,165.3C96,139,192,85,288,96C384,107,480,181,576,186.7C672,192,768,128,864,133.3C9
60,139,1056,213,1152,224C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,124
8,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,3
20,96,320,48,320L0,320Z"
></path>
</svg>
A. Hasil
BAB III
PENUTUP
B. Analisa
Disini saya membuat semacam gelombang, tetapi untuk source codenya saya
tidak mengambil source dari boostrap, akan tetapi menggunakan website Get
Waves, disini kta bisa mengantur gelombang sesuai yang kita inginkan.
9
V. Membuat tampilan about
<!--About-->
<section id="about">
<div class="container">
<div class="row text-center mb-3">
<div class="col">
<h2>About Me</h2>
</div>
</div>
</div>
<div class="col md-4">
<p>
Saya mahasiswa dari Politeknik Negeri Lhokseumawe. Saya adalah anak pertama dari tiga bersaudara, dan lahir dikeluarga yang
alhamudillah berkecukupan. Selama ini alhamdulillah aku belum meresa kekurangan, dan aku bahagia dilahirkan di keluarga ini,
keluarga yang benar-benar melengkapi satu sama lain. Keseharianku sama seperti mahasiswa pada umumnya, belajar, membantu
orang tua, dan lain lain. Tapi sebagai remaja saya juga sering bermain dengan teman-teman ketika ada waktu luang. Jujur
keseharianku berubah ketika aku menjadi Mahasiswa.
</p>
<div class="col md-4">
<p>
Sebelum masuk perkuliahan saya lebih sering santai dirumah, bermain, nonton film, buka sosial media, dan banyak hal yang
lain. Karena saya merasa kekurangan kegiatan.Tapi ketika saya masuk ke dunia perkuliahan itu semua berubah.
saya lebih sering berhadapan dengan laptop untuk mengerjakan tugas-tugas. Belajar membagi waktu, agar tidak ada yang
dirugikan dengan itu semua. Awal masuk kuliah saya merasa kaget, yang biasanya santai-santai sekarang harus
giat belajar untuk mendapat predikat bagus. tapi entah kenapa saya lebih senang begini, ada kegiatan yang aku lakukan, dan
tidak bosan dengan aktifitas selama ini Dipagi hari saya bangun, Setelah saya lanjut dengan membersihkan
diri, kadang saya melakukan ini setelah sholat, kadang juga setelah membantu ibu dan beres-beres rumah. tidak ada lagi
pekerjaan yang aku lakukan.
</p>
<div class="col md-4">
<p>
Disore hari, setelah sholat ashar, ibuku pulang dan saya menyambut beliau, setelah itu aku melanjutkan dengan menyapu rumah
dan membersihkan diri. Kadang ketika ibuku pulang saya berbicara dengan dia, bercerita apa yang terjadi dihari itu dengan
ayahku juga tentunya. Ketika ibuku kerja, saya dirumah dengan ayahku, karena beliau melakukan pekerjaannya dirumah. Jika
ditanya lebih dekat dengan ayah atau ibu tentu aku akan menjawab keduanya, karena aku anaknya jadi tidak ada alasan untuk
menjawab itu, jadi apapun yang saya lakukan aku sering bercerita kepada mereka.
</p>
<div class="col md-4">
<p>
Dimalam hari setelah sholat maghrib kita menonton TV, dilanjut dengan makan bersama, sekedar informasi, dikeluarga kami
selalu melakukan makan bersama entah dipagi hari, siang, atau malam. Ketika semua ada dirumah, kita akan melakukan makan
bersama sambil bercerita dan lain-lain. Setelah makan malam kita biasanya menonton TV bersama, orang tuaku bersantai, aku
biasanya mengerjakan tugas, atau mengecek ulang tugas ku. Setelah itu sekitar jam 11 malam, kita semua mulai masuk ke kamar
masing masing untuk istirahat. Tapi biasanya saya tidak bisa langsung tidur begitu saja, saya sering bermain hp, menoton
video pembelajaran ketika dikamar. Jujur saya tidak suka kebisingan karena itu mengganggu konsentrasi, tapi ketika sudah
masuk ke kamar saya merasa tenang dan bisa melajutkan tugas, atau melihat kembali materi. Kadang juga melanjutkan bermain
sosial media, sampai akhirnya aku merasa ngantuk dan tertidur Mungkin kegiatan sehari-hariku hampir sama dengan yang lain,
karena tidak ada hal yang istimewa dalam keseharianku. Hal diatas sering terjadi dan hampir setiap hari selalu begitu,mungkin
sedikit berubah ketika malam minggu atau dihari minggunya. Selebihnya hampir sama semua.
</p>
</div>
</div>
</section>
<!--akhir About-->
A. Hasil
B. Analisa
10
Di bagian about ini saya mendeskripsikan sedikit tentang keseharian saya.
Sedikit nya ada 4 paragraf menggunakan col md yaitu untuk mengatur baris
pada tiap paragraf
VI. Membuat tampilan photo
<!--photo-->
<section id="photo">
<div class="container">
<div class="row text-center">
<div class="col mb-3">
<h2>My Photo</h2>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-2 text-center">
<div class="card">
<img src="img/2.jpg" class="card-img-top" alt="photo2" />
<div class="card-body">
<p class="card-text">Gambar 1</p>
</div>
</div>
</div>
<div class="col-md-3 mb-2 text-center">
<div class="card">
<img src="img/3.jpg" class="card-img-top" alt="photo3" />
<div class="card-body">
<p class="card-text">Gambar 2</p>
</div>
</div>
</div>
<div class="col-md-3 mb-2 text-center">
<div class="card">
<img src="img/222.jpg" class="card-img-top" alt="photo4" />
<div class="card-body">
<p class="card-text ">Gambar 3</p>
</div>
</div>
</div>
<div class="col-md-3 mb-2 text-center">
<div class="card">
<img src="img/4.jpg" class="card-img-top" alt="photo4" />
<div class="card-body">
<p class="card-text ">Gambar 4</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--akhir photo-->
11
A. Hasil
B. Analisa
Ditampilan foto saya menambahkan 4 foto, dan tiap foto saya memberi
keterangan gambar 1 dan seterusnya.
Tiap poto mempunya 3 collom, dan mb-2/ spasi tiap kalimat nya
VII. Membuat tampilan kontak
<!--Kontak-->
<section id="Kontak">
<div class="container">
<div class="row text-center mb-3">
<div class="col">
<h2>Kontak saya</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<form>
<div class="mb-3">
<label for="name" class="form-label">Nama lengkap</label>
<input type="text" class="form-control" id="name" aria-describedby="name/" />
</div>
<div class="mb-3">
<label for="Email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" />
</div>
<div class="mb-3">
<label for="pesan" class="form-label">pesan</label>
<textarea class="form-control" id="pesan" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Kirim</button>
</form>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#0d6efd"
fill-opacity="1"
d="M0,160L48,176C96,192,192,224,288,202.7C384,181,480,107,576,90.7C672,75,768,117,864,144C960,171,1056,181,1152,176C1248,171,1344,149,1392,138.7L1440,
128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z
"
></path>
</svg>
</section>
<!--akhir kontak-->
12
A. Hasil
B. Analisa
Dibagian kontak saya menambahkan semacam form untuk mengirim pesan
Email kepada saya.
Dibagian kotak yang pertama saya sertakan bagian untuk mengisi nama
lengkap, disusul nama Email, dan pesan yang ingin di sampaikan kepada saya
Dan untuk bagian button submit, saya menggunakan warna biru yang
berformat btn-primary.
VIII. Membuat tampilan footer
<!--Footer-->
<footer class="bg-primary text-white text-center pb-2">
<p>Create with by :<a href="https://www.instagram.com/akmalsutansyah/?hl" class="text-
white fw-bold mb-6"> Follow Instagram </a></p>
<p>Create with by :<a href="https://web.facebook.com/mulidar.hakiki" class="text-white
fw-bold mb-6"> Fb</a></p>
</footer>
<!--Akhir footer-->
A. Hasil
13
B. Analisa
Di bagian footer ini saya kembali menggunakan gelombang yang saya ambil
source code nya dari Get Waves
Saya juga menampilkan beberapa link untuk mengakses media sosial saya
seperti instagram, dan facebook.
Dan menggunakan text yang berwarna putih supaya tidak berkamuflase
dengan gelombang yang telah tertera.
BAB III
PENUTUP
I. Kesimpulan
Dari Laporan diatas dapat disimpulkan bahwa Script-script di dalam html dan
CSS adalah bahasa pemrograman yang khusus untuk halaman web agar halaman
web menjadi lebih hidup.
14
