PEMROGRAMAN WEB. Aini Nurpadilah PRODI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS KRISNADWIPAYANA 2021

(1)

PEMROGRAMAN WEB

Aini Nurpadilah 2070231059

PRODI TEKNIK INFORMATIKA

FAKULTAS TEKNIK UNIVERSITAS KRISNADWIPAYANA

2021

(2)

LATAR BELAKANG

Perkembangan teknologi informasi dan telekomunikasi telah memacu perkembangan dan kemajuan di segala bidang, termasuk bidang pendidikan yang kini hampir seluruhnya telah mempunyai fasilitas internet dan website sebagai salah satu bentuk pelayanan informasi penjual kemasyarakat umum.

Website merupakan halaman situs sistem informasi yang dapat diakses secara cepat. Website ini didasari dari adanya perkembangan teknologi informasi dan komunikasi. Melalui perkembangan teknologi informasi, tercipta suatu jaringan antar komputer yang saling berkaitan. Jaringan yang dikenal dengan istilah internet secara terus-menerus menjadi pesan–pesan elektronik, termasuk e-mail, transmisi file, dan komunikasi dua arah antar individu atau komputer..

TUJUAN

1. Memenuhi salah satu persyaratan untuk dapat menyelesaikan tugas mata kuliah praktikum pemrograman web

2. Merancang dan membuat website dengan menerapkan HTML,CSS dan PHP

3. Sebagai wadah untuk membagikan sumber informasi

4. Memberikan pengetahuan dan gambaran mengenai cara pembuatan website dan memiliki website itu sendiri

MANFAAT

Dapat Mengaplikasikan ilmu yang diperoleh selama perkuliahan yang

berhubungan dengan pembuatan Web Profile dan Sebagai hal baru dalam

menambah pengetahuan.

(3)

MODUL 1

Latihan 1: Radio button

Output:

Latihan 2: Button Choice

(4)

Output:

Latihan 3: Check Box

Output:

(5)

Latihan 4: Combo Box

Output:

Modul 2 CSS

2.1. lat_css.html

(6)

Output:

2.2. style.css

2.3. css external2 : external.html

2.4. css1.html

(7)

Output:

2.5. css2.html

(8)

Output:

2.6. css3.html

(9)

Output:

2.7. table_margin.html

Output:

(10)

2.8. link_tbganti.css

2.9. fm_btnflat.html

(11)

(12)

Output:

(13)

Tugas Praktikum Modul 2

Index.html

(14)

Style.css

(15)

(16)

Output:

Modul 3

3.1. coba.php

Output:

(17)

3.2. tanggal.php

Output:

3.3. variable.php

Output:

(18)

3.4. masukkan.php

Output:

3.5. keluaran.php

(19)

3.6. kondisi.php

Output:

3.7. ulang.php

(20)

Output:

3.8. lok_glo.php

(21)

Output:

3.9. operator.php

Output:

3.10. ekspresi.php

Output:

(22)

Tugas Praktikum Modul 3

1. Script

Output:

(23)

2. Membuat kalkulator (calculator.php)

(24)

Style.css

(25)

Output:

(26)

3.

(27)

(28)

Output:

(29)

MODUL 4 4.1. if.php

Output:

4.2. ifelse.php

Output:

(30)

4.3. switch.php

Output:

(31)

4.5. while.php

Output:

4.6. do while.php

Output:

(32)

4.7. array1.php

Output:

4.8. arraystring.php

(33)

4.9 array_multidimensi.php

(34)

Tugas modul 4 1.

Output

(35)

Project Akhir

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

font-family: Arial, Helvetica, sans-serif;

}

.hero-image {

background-color: #cccccc;

height: 799px;

background-position: center;

background-repeat: no-repeat;

background-attachment: fixed;

background-size: cover;

position: relative;

}

.hero-text {

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: rgb(19, 17, 17);

(36)

}

</style>

</head>

<body>

<h1>PRAKTIKUM PEMROGRAMAN WEB</h1>

<h3>Nama : Aini Nurpadilah</h3>

<h3>Class : C1/P2K</h3>

</div>

</body>

</html>

Style.css

/* Sidebar Div */

.menu{

color:white;

background-color: rgba(128, 128, 128, 0.692);

} div {

color: #fff;

width: 250px;

padding-left: 20px;

height: 100vh;

border-top-right-radius: 90px;

}

/* Div header */

div h2 {

padding: 40px 0 0 0;

cursor: pointer;

}

/* Div links */

div a {

font-size: 14px;

color: #fff;

display: block;

padding: 12px;

padding-left: 30px;

text-decoration: none;

outline: none;

(37)

}

/* Div link on hover */

div a:hover {

color: #3d4047dc;

background: #fff;

position: relative;

background-color: #fff;

border-top-left-radius: 22px;

border-bottom-left-radius: 22px;

} body{

background-size: 100%;

}

<!DOCTYPE html>

<html>

<head>

<h1 class="menu"><center>SELAMAT DATANG DI MENU TUGAS AKHIR PRAKTIKUM SAYA</center></h1>

</head>

<body>

<div>

(38)

Biodata </a>

Tabel Mata Kuliah </a>

Universitas </a>

Kalender </a>

Bank </a>

Music </a>

Media Sosial </a>

</div>

</body>

</html>

(39)

Biodata.html

<!doctype html>

<html>

<head>

<title>biodata</title>

<h1 class="biodata"><center>SELAMAT DATANG DI HALAMAN BIODATA</center></h1>

</head>

<body>

<tr>

</td>

</tr>

<tr>

<td><b>Nama Lengkap</b></td>

<td>Aini Nurpadilah</td>

</tr>

<tr>

<td><b>Tempat, Tanggal Lahir</b></td>

<td>Bekasi, 30 Januari 2001</td>

</tr>

<tr>

<td>20 Tahun</td>

(40)

</tr>

<tr>

<td><b>Jenis Kelamin</b></td>

<td>Perempuan</td>

</tr>

<tr>

<td><b>Agama</b></td>

<td>Islam</td>

</tr>

<tr>

<td><b>Kewarganegaraan</b></td>

<td>Indonesia</td>

</tr>

<tr>

<td><b>Alamat</b></td>

<td>Kota Bekasi</td>

</tr>

<tr>

</tr>

<tr>

<td><b>Perguruan Tinggi</b></td>

<td>Universitas Krisnadwipayana</td>

</tr>

<tr>

<td><b>Fakultas</b></td>

<td>Teknik</td>

</tr>

<tr>

<td><b>Juurusan</b></td>

<td>Informatika</td>

</tr>

<tr>

<td>rebahan</td>

</tr>

</td>

(41)

</tr>

</table>

</fieldset>

</form>

</body>

</html>

Biodata.cs .biodata{

color:white;

}

table,tr,td{

background-color:rgba(128, 128, 128, 0.192) ; font-family: Verdana;

color:black;

border: 1px solid black;

padding: 5px;

border-collapse: collapse;

} .h{

border: 8px groove rgb(245, 237, 239);

padding: 20px;

}

.posisi{

position: absolute;

margin-left: auto;

margin-right: auto;

margin-bottom: auto;

margin-top: auto;

left: 0;

right: 0;

top: 100px;

bottom: 0;

} body{

} .back{

position:center;

width:80px ;

margin-right:1250px;

margin-top:450px;

(42)

margin-left:40px;

}

Tabel.html

<html>

<head>

<title>tabel</title>

<h1>TABEL JADWAL KULIAH</h1>

<h1>SEMESTER GANJIL TAHUN AKADEMIK 2020/2021</h1>

<h1>PROGRAM STUDI TEKNIK INFORMATIKA</h1>

<h1>KELAS C2/P2K SABTU</h1>

</div>

td {

border: 1px solid #CCCCCC;

padding: 5px 15px;

}

</style>

</head>

<body>

<td>Mata Kuliah</td>

<td>Dosen</td>

</tr>

(43)

<td>Grafika Komputer</td>

<td>Moch Fachri,ST,MT</td>

</tr>

<td>Basis Data Lanjutan</td>

<td>Avip Kurniawan,ST,MKom</td>

</tr>

<td>Pendidikan Bahasa Inggris 2</td>

<td>Drs.Anwar Sihombing,MPd</td>

</tr>

<td>Komputasi Cerdas</td>

<td>Ali Khumaidi,MKom</td>

</tr>

</tr>

<td>Statistik & Probabilitas</td>

<td>Ninuk Williani,SSi,MKom</td>

</tr>

<td>Teori Graf & Otomata</td>

</tr>

(44)

<td>Pemrograman Web</td>

</tr>

<td>Praktikum Pemrograman Web</td>

<td>Lab.KOMPUTER</td>

<td>Menyesuaikan</td>

</tr>

</table>

</body>

</html>

Table.css

.row{

text-align: center;

width: 800px:

height:400px;

color:white;

} table{

position;: Relative;

Border: Collapse;

Margin : auto;

Padding : 10px;

Text-Align : Left;

Border-bottom : 1px solid #ddd;

Background-color th : blue;

} .back{

position:center;

width:60px ;

margin-left:50px;

} body{

}

(45)

Universitas.html

<!DOCTYPE html>

<html>

<head>

<title>Universitas</title>

<h1 class="universitas"><center>SELAMAT DATANG DI HALAMAN UNIVERSITAS</center></h1>

</head>

<body>

<a href="https://unkris.ac.id/"><img class="unkris"

src="unkris1.png"></a>

<a href="https://www.harvard.edu/"><img class="harvard"

src="harvard1.png"></a>

<a href="https://www.ox.ac.uk/"><img class="oxford"

src="oxford1.png" ></a>

</section>

</body>

</html>

Universitas.css .universitas{

color:white;

}

.unkris{

margin-left:100px;

width:225px;

margin-top:150px;

(46)

}

.harvard{

margin-left:200px;

width:225px;

margin-top:150px;

}

.oxford{

margin-left:200px;

width:200px;

margin-top:150px;

}

.back{

position:center;

width:80px ;

margin-top:40px;

margin-left:70px;

}

body{

}

Calender.html

<!DOCTYPE html>

<head>

<title>Kalender</title>

<h1 class="kalender"><center>SELAMAT DATANG DI HALAMAN KALENDER</center></h1>

(47)

href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css

">

<script

src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></s cript>

<script

src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"><

/script>

</head>

<body>

<iframe

src="https://calendar.google.com/calendar/embed?src=id.indonesian%23holiday%40 group.v.calendar.google.com&ctz=Asia%2FJakarta"style="border: 1" width="600"

height="600" frameborder="0" scrolling="no"></iframe>

</center>

</div>

</body>

</html>

Kalender.css .kalender{

color:white;

} .back{

position:center;

width:80px ;

margin-top:-170px;

margin-left:10px;

} body{

}

(48)

Bank.html

<!DOCTYPE html>

<html>

<head>

<h1 class="bank"><center>SELAMAT DATANG DI HALAMAN BANK</center></h1>

</head>

<body>

<a href="https://www.bca.co.id/id/individu"><img class="logobca1"

src=" BCA1.png"></a>

</ul>

<a href="https://www.bni.co.id/id-id/"><img class="logobni2"

src="bni1.png"></a>

</ul>

<a href="https://www.bankbsi.co.id/"><img class="logobca3"

src="bsi1.png"></a>

</ul>

</section>

</body>

</html>

Bank1.css .bank{

color:white;

(49)

} .bca{

margin: auto;

width: 20%;

padding: 20px;

}

.bni{

margin: auto;

width: 20%;

padding: 20px;

} .bsi{

margin: auto;

width: 20%;

padding: 30px;

}

.back{

position:center;

width:80px ;

margin-top:90px;

margin-left:50px;

} body{

}

(50)

Music.html

<!DOCTYPE html>

<html>

<head>

<title>Music</title>

<h1 class="music"><center>SELAMAT DATANG DI HALAMAN MUSIK</center></h1>

</head>

<body>

<ul>

<h2 style="color:white;">Beggin-maneskin</h2>

</audio>

</ul>

<ul>

<h2 style="color:white;">Tabu-Brisia Jodie</h2>

</audio>

</ul>

<ul>

<h2 style="color:white;">Easy on me-Adele</h2>

</audio>

</ul>

</body>

</html>

Music.css .music{

color:white;

} .back{

width:80px ;

margin-top:40px;

margin-left:40px;

background-position: center;

} body{

(51)

}

Media_social.html

<!DOCTYPE html>

<html>

<head>

<title>media sosial</title>

<h1 class="media_sosial"><center>SELAMAT DATANG DI HALAMAN MEDIA SOSIAL</center></h1>

</head>

<body>

<a href="https://www.instagram.com/"><img class="instagram"

src="instagram1.png"></a>

<a href="https://www.facebook.com/"><img class="facebook"

src="facebook1.png"></a>

<a href="https://twitter.com/"><img class="twitter"

src="twitter.png"></a>

</section>

</body>

</html>

Media_social.css .media_sosial{

color:white;

(52)

}

.instagram{

margin-left:100px;

width:200px;

margin-top:200px;

}

.facebook{

margin-left:300px;

width:200px;

margin-top:200px;

}

.twitter{

margin-left:300px;

width:200px;

margin-top:200px;

} .back{

position:center;

width:80px ;

margin-top:10px;

margin-left:10px;

} body{

}