Laporan Akhir Praktikum P.web

LAPORAN AKHIR PRAKTIKUM
MATA KULIAH
PEMROGRAMAN WEB
ABDUL HAFIZH FIRMANSYAH
210602051
B2 – PAGI
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH GRESIK
2023
MODUL 1
HTML
1. DASAR TEORI
HTML (Hypertext Markup Language) digunakan untuk membangun halaman
web. HTML memungkinkan seorang desainer web menjadi lebih mudah
menjalankan tugasnya. HTML dikenal sebagai standar bahasa yang digunakan
untuk menampilkan dokumen web. Yang dapat dilakukan dengan HTML adalah:
1. Mengontrol tampilan dari web page dan contentnya.
2. Mempublikasikan dokumen secara online sehingga bisa diakses dari seluruh

dunia.
3. Membuat online form yang bisa digunakan untuk menangani pendaftaran,

transaksi secara online.
4. Menambah objek seperti gambar, audio, video, dan juga java applet dalam
dokumen HTML.
Berikut ini merupakan beberapa macam kerangka inti yang membentuk struktur
bahasa mark-up mulai tag, elemen, dan atribut.
1. Tag, merupakan perintah atau awalan instruksi yang nantinya akan dibaca pada
web browser. Misalnya adalah penggunaan tag <strong>, yang berfungsi untuk
memberikan ketebalan pada teks paragraf.
2. Element, merupakan proses keseluruhan kode yang dimulai dari tag pembuka
(< >) dan diakhiri dengan tag penutup (</>), sebagai contoh element <p>Ini
adalah website saya</p>.
3. Attribute, merupakan informasi atau perintah tambahan yang dimasukkan ke

dalam sebuah elemen. Misalnya saja <img class=”gambar” src=”komputer.jpg”
alt=”komputer1” />, sehingga atributnya adalah class, src dan alt image.
Setelah mengetahui informasi terkait struktur awal dari HTML, selanjutnya kita
akan mengenal kerangka intinya.
1. <!DOCTYPE html>
Berfungsi untuk mendeklarasikan kepada komputer bahwa anda menuliskan

sebuah perintah di dalam kode HTML.
2. <html></html>
Berfungsi untuk tag yang menandakan proses mulai menuliskan kode program
pada dokumen HTML.
3. <head></head>
Tag ini digunakan untuk menambahkan metadata ke dalam dokumen html yang
berisi judul, deskripsi, library dan lain sebagainya.
4. <body></body>
Dan yang terakhir, tag body digunakan sebagai tempat untuk menuliskan setiap
elemen atau lebih tepatnya disebut juga dengan konten pada HTML itu sendiri.
2. IMPLEMENTASI TEORI
Source Code HTML :
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hafizh Firmansyah - Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.13.0/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-
9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head> <body>

<div class="bg-loader">
<div class="loader"></div>
</div>

<div class="medsos">
<div class="container">
<ul>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a >| </a></li>
<li><a href="login.html">Masuk akun</a></li>
</ul> </div> </div>
<header>
<h1><a href="index.html">Firmann</a></h1>
<ul>
<li class="active"><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="service.html">SERVICE</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</header>


<section class="banner">
<h2>WELCOME TO MY WEBSITE</h2>
</section>


<section class="about">
<h3>ABOUT</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<strong>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</strong>,
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged</p>
</div>
</section>

<section class="service">
<h3>SERVICE</h3>
<div class="box">
<div class="col-4">
<div class="icon"><i class="fas fa-mobile"></i></div>
<h4>MOBILE APP</h4>
</div>
<div class="col-4">
<div class="icon"><i class="fas fa-globe"></i></div>
<h4>WEB DEVELOPMENT</h4>
</div>
<div class="col-4">
<div class="icon"><i class="fas fa-edit"></i></div>
<h4>DESIGN</h4>
</div>
<div class="col-4">
<div class="icon"><i class="fas fa-chart-bar"></i></div>
<h4>DIGITAL MARKETING</h4>
</div>
</div>
</div>
</section>

<footer>
<small>Copyright © 2023 - Firmann. All Rights Reserved.</small>
</div>
</footer>
<script type="text/javascript">
$(document).ready(function(){
$(".bg-loader").hide();
})
</script>
</body>
</html>
MODUL 2
CSS
1. DASAR TEORI
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa

komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
Dengan CSS, Anda bisa mengatur jenis font, warna tulisan, dan latar belakang
halaman.
Secara umum, CSS berfungsi untuk mengatur tampilan halaman website berbasis
HTML atau bahasa markup lainnya. Tapi, masih ada beberapa fungsi CSS
lainnya, yaitu:
1. Mempercepat Loading Halaman Web
2. Memudahkan Pengelolaan Kode
3. Menawarkan Lebih Banyak Variasi Tampilan
4. Membuat Website Tampil Rapi di Semua Ukuran Layar
Jenis-jenis CSS :
1. Inline CSS
Inline CSS adalah kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini
hanya mempengaruhi satu baris kode HTML. Perhatikan baris kode di bawah ini
sebagai contohnya:
<h1 style="font-size:30px;color:blue;"> Hello world </h1>
Dengan kode tersebut akan memunculkan tulisan “Hello world” dengan warna
biru dan ukuran yang besar.
2. Internal CSS
Internal CSS dituliskan di bagian header file HTML. Fungsinya untuk

menentukan tampilan sebuah halaman.. Contohnya, jika Anda ingin agar halaman
memiliki latar belakang biru dan teks berukuran 20px yang berwarna putih,
kodenya seperti di bawah ini:
<head>
<style>
Body {background-color:blue;} P {font-size:20px; color:white;}
</style>
</head>
<p>Ini adalah contoh kalimat.</p>
3. External CSS
Sesuai namanya, external CSS adalah kode CSS yang diletakkan di luar dokumen
HTML sebagai file .css. Jenis CSS ini berfungsi untuk mengatur tampilan semua
halaman website yang Anda tentukan. Jadi, external CSS berguna ketika Anda
ingin mengatur tampilan beberapa halaman sekaligus.
Agar halaman website bisa menggunakan external CSS, Anda perlu

menambahkan kode di bagian header kode HTML-nya. Contohnya seperti berikut
ini:
<head> <link rel="stylesheet" type="text/css" href=fileCSSAnda.css">
</head>
• Selector CSS
CSS selector adalah salah satu rangkaian aturan dari CSS yang memiliki fungsi
untuk memilih suatu elemen yang ingin kamu beri gaya. Jenis-jenis selector :
a. Selector Tag HTML.
Jenis penyeleksi ini menggunakan nama-nama tag HTML. Pada dasarnya seluruh
element tag visual HTML dapat digunakan sebagai selector. Artinya, pada setiap
halaman HTML, terbuat dari konten yang ditempatkan di dalam tag HTML dan
setiap set tag tersebut mewakili elemen pada halaman.
b. Selector Class
Dalam HTML nantinya akan ada tag-tag html pada umurnya memiliki atribut
class. Saat memilih elemen dengan class tertentu, maka kamu bisa menuliskan
karakter titik (.) kemudian diikuti dengan nama class.
c. Selector ID
Salah satu atribut dalam HTML yang dapat digunakan sebagai selector adalah
atribut 'id'. Nantinya, id dari elemen tersebut memiliki sifat yang unik dalam suatu
laman, jadi jenis penyeleksi ini sering digunakan untuk memilih satu elemen unik.
Biasanya, saat memilih elemen dengan id tertentu, maka ditulis dengan karakter
hash (#), kemudian diikuti dengan id elemen.
d. Selector Group
Terakhir ada jenis penyeleksi group yang nantinya akan memilih seluruh elemen
HTML dengan style CSS yang tidak berbeda dengan lainnya. Untuk penggunaan
jenis ini, pisahkan setiap selector dengan tanda koma.
• Font Styling
a. Font-family
Mengatur jenis font yang akan digunakan.
b. Font-size
Mengatur ukuran font( %, px).
c. Font-weight
Mengatur ketebalan font (bold, normal, dll.).
Mengubah font menjadi small caps (normal, small caps).
d. Font-style
Mengubah font menjadi bercatak miring (normal, italic, dan oblique).

• Text style
a. Color
Memberi warna pada tulisan (red, #ff0000, rgb(255,0,0).
b. Text-align
Mengatur format paragraph/teks (left, right, center, justify).
c. Text-decoration
Mengatur dekorasi pada teks (none, underline, overline, line –through).
d. Text-transform
Mengubah jenis furuf menjadi huruf besar, kecil / kapital (lowercase,

uppercase , Capitalize).
e. Letter-spacing
Mangatur spasi antar huruf (normal , px).
f. Word-spacing
Mangatur spasi antar kata (normal , px).
• Background
a. Background-color
Memberi warna pada background.
b. Background-image
Mengatur gambar yang akan digunakan pada background.
c. Background-position
Mengatur posisi gambar pada background.
d. Background-repeat
Mengatur jenis pengulangan gambar pada background.

e. Background-color
Memberi warna pada background (red ,#ff0000).
f. Background-image
Mengatur gambaryang akan digunakan pada background (url

(gambar/bg1.png);).
g. Background-position
Mengatur posisi gambarpada background (top/center/right

left/center/right).
• Pseudo-class
1. : link
Style default pada sebuah link a yang memiliki href).
2. : hover
Style ketika kursor mouse berada di atas sebuah link/element.
3. : active
Style ketika sebuah link di klik (keadaan aktif).
4. : visited
Style ketika sebuah link suda pernah di kunjungi sebelumnya

(menggunakan browser yang sama)
Source Code CSS :
*{
padding:0;
margin:0;
font-family: sans-serif;
}
a{
color: inherit;
text-decoration: none;
}
.medsos {
padding:5px 0;
background-color: #148F77;
}
.medsos ul li {
display: inline-block;
color: #fff;
margin-right: 10px;
}
.container {
width:80%;
margin:0 auto;
}
.container:after {
content:'';
display: block;
clear: both;
}
header h1 {
float: left;
padding:15px 0;
color: #148F77;
}
header ul {
float: right;
}
header ul li {
transition: 0.3s;
}
header ul li a {
padding:25px 20px;
transition: 0.3s;
}
header ul li a:hover {
color: #fff;
}
.active {
color: #fff;
}
.banner {
height: 60vh;
background-image: url('../img/banner.jpg');
background-size: cover;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.banner:after {
content:'';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(20, 143, 119, .6);
}
.banner h2 {
color: #fff;
z-index: 1;
padding: 20px 25px;
border:3px solid #fff;
}
section {
padding:50px 0;
}
section h3 {
text-align: center;
padding:20px 0;
color: #148F77;
margin-bottom: 25px;
}
.about,
.service {
padding-bottom: 100px;
}
.about p {
color: #666;
word-spacing: 2px;
line-height: 25px;
text-align: center;
}
.service {
background-color: #f9f9f9;
}
.box {
color: #148F77;
}
.box:after {
content: '';
display: block;
clear: both;
}
.box .col-4 {
width:25%;
padding:20px;
box-sizing: border-box;
text-align: center;
float: left;
}
.icon {
width:70px;
height:70px;
border:1px solid;
border-radius: 50%;
text-align: center;
line-height: 70px;
font-size: 20px;
margin:0 auto;
}
.box .col-4 h4 {
margin:20px 0;
}
footer {
padding:30px 0;
background-color: #333;
color: #fff;
text-align: center;
}
.bg-loader {
background-color: #eee;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.bg-loader .loader {
width:100px;
height: 100px;
border:3px solid #fff;
border-radius: 50%;
border-top-color: #148F77;
border-right-color: #148F77;
border-bottom-color: #148F77;
animation: puterin .8s linear infinite;
}
.label {
color: #fff;
}
@keyframes puterin {
100% {
transform: rotate(360deg);
}
}
@media screen and (max-width: 768px){
.container {
width:90%;
}
header h1 {
text-align: center;
float: none;
}
header ul {
text-align: center;
float: none;
}
.box .col-4 {
width:100%;
float: none;
}
}
Output :
MODUL 2
JAVASCRIPT
1. DASAR TEORI
JavaScript adalah bahasa pemrograman yang berbentuk kumpulan skrip yang

biasanya digunakan untuk menambahkan interaksi antara halaman web dengan
pengunjung halaman web. JavaScript dijalankan pada sisi klien yang akan
memberikan kemampuan fitur-fitur tambahan halaman web yang lebih baik
dibandingkan fitur-fitur yang terdapat pada HTML. Saat ini javascript tidak hanya
digunakan di sisi client (browser) saja. Javascript juga digunakan pada server,
console, program desktop, mobile, IoT, game, dan lain-lain.
Javascript, seperti namanya, merupakan bahasa pemrograman scripting. Dan

seperti Bahasa scripting lainnya, Javascript umumnya digunakan hanya untuk
program yang tidak terlalu besar, biasanya hanya beberapa ratus baris. Javascript
pada umumnya mengontrol program yang berbasis Java. Jadi memang pada
dasarnya Javascript tidak dirancang untuk digunakan dalam aplikasi skala besar.
JavaScript memiliki struktur sederhana, kodenya dapat disisipkan pada dokumen

HTML atau berdiri sendiri. Struktur penulisan JavaScript dalam dokumen atau
internal berada dalam tag script :
<script>
…
</script>
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar JavaScript</title>

<link rel="stylesheet"type="text/css"href="style.css">

<link
rel="https://fonts.googleapis.com/css?family=Viga&display=swap"rel="styleshe
et">

<script src="script.js"></script>
</head>
<body>


<div class="bg">
<div class="main">
<h2>Calculator</h2>
<form name="form">
<input class="textarea" name="textarea">
</form>
<table>
<tr>
<tr>
<td><input class="button" type="button" value="C"
onclick="clean()"></td>
<td><input class="button" type="button" value="<"
onclick="back()"></td>
<td><input class="button btn-green" type="button"
value="/" onclick="insert('/')"></td>
value="*" onclick="insert('*')"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7"
onclick="insert(7)"></td>
value="-" onclick="insert('-')"></td>
</tr>
<tr>
value="+" onclick="insert('+')"></td>
</tr>
<tr>
<td rowspan=2><input style="height:106px;" class="button
btn-green" type="button" value="=" onclick="equal()">
</tr>
<tr>
onclick="insert('00')"></td>
<td><input class="button" type="button" value="."
onclick="insert('.')"></td>
</tr>
</tr>
</table>
</div>
</div>
<script>
// Insert angka ke textview

function insert(num){
document.form.textarea.value = document.form.textarea.value + num;
}
// Fungsi Hitung
function equal(){
var hasil = document.form.textarea.value;
document.form.textarea.value = eval(hasil);
}
// Clean
function clean(){
document.form.textarea.value = "";
}
// Delete
function back(){
var hasil = document.form.textarea.value;
document.form.textarea.value = hasil.substring(0,hasil.length-1);
}
</script>
</body>
</html>
Output :
MODUL 3
PHP dan MYSQL
1. DASAR TEORI
PHP (Hypertext Preprocessor) merupakan bahasa pemrograman server side

programming yang berfungsi untuk membuat website bersifat dinamis. Halaman
website dinamis memberikan kesempatan kepada user untuk dapat berinteraksi
dengan halaman web tersebut (dengan kata lain, user yang lain dapat mengakses
halaman web yang sama, bisa admin situs maupun pengunjung lain). Contoh
diperlukannya halaman web dinamis ketika ingin membuat halaman buku tamu
atau ingin membuat aplikasi- aplikasi database. Halaman web database juga
mempermudah admin situs untuk merawat (maintenance) situs yang dimilikinya.
Database MySQL sebuah website yang interaktif dan dinamis, tentu
membutuhkan penyimpanan data yang fleksible dan cepat untuk diakses. Salah
satu database untuk server adalah MySQL.
Jenis database ini sangat popular dan digunakan pada banyak website di internet
sebagai bank data. MySQL (Structured Query Language) dan bersifat free. Selain
itu MySQL dapat berjalan di berbagai jenis platform, antara lain Linux, Windows,
dan sebagainya.
Secara umum akses database harus melalui tiga tahap, yaitu:
1. Koneksi ke database
2. Query ke database
3. Pemutusan koneksi dari database
• Cara penulisan PHP
PHP bersifat case sensitif yang artinya semua penulisannya harus sesuai dengan
kamus data yang tersedia. Secara mendasar php memiliki struktur sebagai berikut:
<?php
//Ini contoh komentar dalam php
echo "<h2>Contoh sederhana penulisan PHP</h2>";

$nama="maul";
echo "<p>$nama</p>";
$nilai=10;
$hasil=$nilai+10;
echo $hasil;
?>
Kode diatas adalah contoh sederhana struktur PHP, berikut penjelasanya:
1. Awal kode harus diawali dengan "<?php" dan diakhiri dengan "?>", 2 perintah
tersebut harus ada pada tiap bagian yang memanggil fungsi php.
2. Dalam barisan perintah php, kita bebas menyisipkan komentar dengan diawali
tanda "//". Komentar digunakan untuk mempermudah mengingat kumpulan baris
dengan proses yang sama.
3. Echo digunakan untuk mengirimkan hasil ke browser, sehingga yang

dikirimkan adalah bagian yang berada setelah perintah echo
4. Setiap variabel harus diawali dengan tanda dolar "$" dan dapat dipanggil
kapanpun dalam halaman yang sama.
MySQL adalah Sebuah program database server yang mampu menerima
dan mengirimkan datanya sangat cepat, multi user serta menggunakan peintah
dasar SQL ( Structured Query Language ). MySQL merupakan dua bentuk lisensi,
yaitu FreeSoftware dan Shareware. MySQL yang biasa kita gunakan adalah
MySQL FreeSoftware yang berada dibawah Lisensi GNU/GPL ( General Public
License ). MySQL Merupakan sebuah database server yang free, artinya kita
bebas menggunakan database ini untuk keperluan pribadi atau usaha tanpa harus
membeli atau membayar lisensinya. MySQL pertama kali dirintis oleh seorang
programmer database bernama Michael Widenius .
Selain database server, MySQl juga merupakan program yang dapat

mengakses suatu database MySQL yang berposisi sebagai Server, yang berarti
program kita berposisi sebagai Client. Jadi MySQL adalah sebuah database yang
dapat digunakan sebagai Client mupun server. Database MySQL merupakan suatu
perangkat lunak database yang berbentuk database relasional atau disebut
Relational Database Management System ( RDBMS ) yang menggunakan suatu
Bahasa permintaan yang bernama SQL (Structured Query Language ).
XAMPP adalah free software yang mendukung banyak sistem operasi dan
merupakan kompilasi dari beberapa program. Berfungsi sebagai server yang
berdiri sendiri (localhost), yang terdiri dari Apache HTTP server, MySQL
database dan penerjemah bahasa yang ditulis dengan bahasa PHP dan Perl. Nama
XAMPP merupakan singkatan dari X, Apache, MySQL, PHP, dan Perl. Program
ini tersedia dalam GPU General Public Licence dan bersifat free, merupakan web
server yang mudah digunakan dan dapat melayani tampilan halaman web yang
dinamis. Dalam XAMPP terdapat beberapa bagian penting, yaitu:
1. Htdocs, adalah folder tempat meletakkan berkas-berkas yang akan dijalankan,

seperti berkas PHP, HTML, dan script lain.
2. phpMyAdmin, adalah bagian untuk mengelola basis data MySQL yang ada di
computer. Untuk membukanya harus menggunakan browser dan mengetikkan
alamat http://localhost/phpmyadmin.
3. Control Panel, berfungsi untuk mengelola layanan (service) XAMPP, seperti

menghentikan (stop) layanan, maupun memulai (start).
Source code index.php:
<?php
include 'koneksi.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login | CRUD</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
</head>
<body>
<div class="col-10 m-auto">
<p class="h1 text-center p-5"> Table Database</p>

<a href="create.php" class="btn btn-primary">Tambah Data</a>
<table class="table table-hover table-bordered
border-primary mt-3">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Nim</th>
<th scope="col">Jenis Kelamin</th>
<th scope="col">Alamat</th>
<th scope="col">Email</th>
<th scope="col">Whatsapp</th>
<th scope="col">Action</th>
</tr>
</thead>
<?php
$query = "SELECT * FROM mahasiswa";
$result = mysqli_query($koneksi,$query);
$no = 1;
while ($data = mysqli_fetch_assoc($result)){
?>
<tbody>
<tr>
<td scope="row"><?= $no++?></td>

<td scope="row"><?= $data['nama']?></td>
<td scope="row"><?= $data['nim']?></td>
<td scope="row"><?= $data['jenis_kelamin']?></td>
<td scope="row"><?= $data['alamat']?></td>
<td scope="row"><?= $data['email']?></td>
<td scope="row"><?= $data['whatsapp']?></td>
<td scope="row"><a href="edit.php?id=<?= $data['id']?>"
class="btn btn-warning ms-4">Edit</a>
<form class="d-inline" action="delete.php" method="post">
<input type="hidden" name="id" value ="<?= $data['id']?>">
<button class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
</tbody>
<?php
?>
</table>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>

Laporan Akhir Praktikum P.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 Akhir Praktikum P.web

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN AKHIR PRAKTIKUM

ABDUL HAFIZH FIRMANSYAH

PROGRAM STUDI TEKNIK INFORMATIKA

UNIVERSITAS MUHAMMADIYAH GRESIK

1. Mengontrol tampilan dari web page dan contentnya.

2. Mempublikasikan dokumen secara online sehingga bisa diakses dari seluruh

3. Membuat online form yang bisa digunakan untuk menangani pendaftaran,

3. Attribute, merupakan informasi atau perintah tambahan yang dimasukkan ke

Berfungsi untuk mendeklarasikan kepada komputer bahwa anda menuliskan

Source Code HTML :

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa

1. Mempercepat Loading Halaman Web

2. Memudahkan Pengelolaan Kode

3. Menawarkan Lebih Banyak Variasi Tampilan

4. Membuat Website Tampil Rapi di Semua Ukuran Layar

<h1 style="font-size:30px;color:blue;"> Hello world </h1>

Internal CSS dituliskan di bagian header file HTML. Fungsinya untuk

Body {background-color:blue;} P {font-size:20px; color:white;}

<p>Ini adalah contoh kalimat.</p>

Agar halaman website bisa menggunakan external CSS, Anda perlu

<head> <link rel="stylesheet" type="text/css" href=fileCSSAnda.css">

a. Selector Tag HTML.

Mengatur jenis font yang akan digunakan.

Mengatur ukuran font( %, px).

Mengatur ketebalan font (bold, normal, dll.).

Mengubah font menjadi small caps (normal, small caps).

Mengubah font menjadi bercatak miring (normal, italic, dan oblique).

Memberi warna pada tulisan (red, #ff0000, rgb(255,0,0).

Mengatur format paragraph/teks (left, right, center, justify).

Mengatur dekorasi pada teks (none, underline, overline, line –through).

Mengubah jenis furuf menjadi huruf besar, kecil / kapital (lowercase,

Mangatur spasi antar huruf (normal , px).

Mangatur spasi antar kata (normal , px).

Memberi warna pada background.

Mengatur gambar yang akan digunakan pada background.

Mengatur posisi gambar pada background.

Mengatur jenis pengulangan gambar pada background.

Memberi warna pada background (red ,#ff0000).

Mengatur gambaryang akan digunakan pada background (url

Mengatur posisi gambarpada background (top/center/right

Style default pada sebuah link a yang memiliki href).

Style ketika kursor mouse berada di atas sebuah link/element.

Style ketika sebuah link di klik (keadaan aktif).

Style ketika sebuah link suda pernah di kunjungi sebelumnya

Source Code CSS :

JavaScript adalah bahasa pemrograman yang berbentuk kumpulan skrip yang

Javascript, seperti namanya, merupakan bahasa pemrograman scripting. Dan

JavaScript memiliki struktur sederhana, kodenya dapat disisipkan pada dokumen

// Insert angka ke textview

PHP dan MYSQL

PHP (Hypertext Preprocessor) merupakan bahasa pemrograman server side

Secara umum akses database harus melalui tiga tahap, yaitu:

3. Pemutusan koneksi dari database

• Cara penulisan PHP

//Ini contoh komentar dalam php

echo "<h2>Contoh sederhana penulisan PHP</h2>";

Kode diatas adalah contoh sederhana struktur PHP, berikut penjelasanya:

3. Echo digunakan untuk mengirimkan hasil ke browser, sehingga yang

Selain database server, MySQl juga merupakan program yang dapat

1. Htdocs, adalah folder tempat meletakkan berkas-berkas yang akan dijalankan,

3. Control Panel, berfungsi untuk mengelola layanan (service) XAMPP, seperti