Praktikum 5

PRAKTIKUM
PENGENALAN PEMROGRAMAN
(Bagian 5)
PRAKTIKUM 5
SERVER SIDE (Bagian 5)
PRAKTEK DAN PENGENALAN PHP
PHP adalah singkatan dari Hypertext Preprocessor, yaitu bahasa pemrograman yang sebenarnya mirip dengan
JavaScript dan Python. Perbedaannya adalah, PHP sering kali digunakan untuk komunikasi sisi server, sedangkan JavaScript
bisa digunakan untuk frontend dan backend. Sementara itu, Python hanya untuk sisi server (backend).
Pada praktikum kali ini kita akan membuat tampilan dan fungsi PHP. kita menggunakan template yang sama seperti
praktikum sebelumnya hanya saja cara memasang template bootstrap agak sedikit berbeda :
1. Buat 1 folder baru bernama dt_1.
2. Setelah membuat folder kemudia buat 2 folder lagi dalam dt_1 yaitu folder assets dan layout.
3. Kemudian copy seluruh assets template atlantis kedalam folder assets yang baru saja dibuat.
4. Kemudian membuat file header.php dan footer.php didalam folder layout.

5. Isi script kedalam halaman header.php yaitu dengan membuka file index.html yang ada pada folder atlantis atau
bisa juga menggunakan script index pada praktikum sebelumnya. dan script yang diambil hanya sampai sebelum tag
<footer>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Praktikum Server Side</title>
<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
<link rel="icon" href="assets/img/icon.ico" type="image/x-icon"/>


<script src="assets/js/plugin/webfont/webfont.min.js"></script>
<script>
WebFont.load({
google: {"families":["Lato:300,400,700,900"]},
custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome
5 Brands", "simple-line-icons"], urls: ['assets/css/fonts.min.css']},
active: function() {
sessionStorage.fonts = true;
}
});
</script>


<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/atlantis.min.css">

<link rel="stylesheet" href="assets/css/demo.css">
</head>
<body>
<div class="wrapper">
<div class="main-header">

<div class="logo-header" data-background-color="dark2">
<a href="index.html" class="logo">

<img src="assets/img/logo.svg" alt="navbar brand" class="navbar-brand">
</a>
<button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-
toggle="collapse" data-target="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="icon-menu"></i>
</span>
</button>
<button class="topbar-toggler more"><i class="icon-options-vertical"></i></button>
<div class="nav-toggle">
<button class="btn btn-toggle toggle-sidebar">
<i class="icon-menu"></i>
</button>
</div>
</div>



<nav class="navbar navbar-header navbar-expand-lg" data-background-color="dark">
<div class="container-fluid">
<ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
<li class="nav-item dropdown hidden-caret">
<a class="nav-link" href="javascript:void(0)" role="button" aria-
expanded="false" data-target="#modalqr" data-toggle="modal">
<i class="fa fa-qrcode"></i>
</a>
</li>
<a class="nav-link" href="#" role="button" aria-expanded="false"
onclick="window.location=''">
<i class="fa fa-undo"></i>
</a>
</li>
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-envelope"></i>
</a>
</li>
<a class="dropdown-toggle profile-pic" data-toggle="dropdown"
href="#" aria-expanded="false">
<div class="avatar-sm">
<img src="assets/img/profile.jpg" alt="..."
class="avatar-img rounded-circle">
</div>
</a>
<ul class="dropdown-menu dropdown-user animated fadeIn">
<div class="dropdown-user-scroll scrollbar-outer">
<li>
<div class="user-box">
<div class="avatar-lg">
<img
src="assets/img/profile.jpg" alt="image profile" class="avatar-img rounded">
</div>
<div class="u-text">
<h4>Hizrian</h4>
<p class="text-
muted">hello@example.com</p>
<a href="profile.html"
class="btn btn-xs btn-secondary btn-sm">View Profile</a>
</div>
</div>
</li>
<li>
<div class="dropdown-divider"></div>
<a class="dropdown-item"
href="#">Logout</a>
</li>
</div>
</ul>
</li>
</ul>
</div>
</nav>

</div>


<div class="sidebar sidebar-style-2" data-background-color="dark2">
<div class="sidebar-wrapper scrollbar scrollbar-inner">
<div class="sidebar-content">
<div class="user">
<div class="avatar-sm float-left mr-2">
<img src="assets/img/profile.jpg" alt="..." class="avatar-img
rounded-circle">
</div>
<div class="info">
<a data-toggle="collapse" href="#collapseExample" aria-
expanded="true">
<span>
Unwaha
<span class="user-level">Administrator</span>
</span>
</a>
<div class="clearfix"></div>
</div>
</div>
<ul class="nav nav-primary">
<li class="nav-section">
<span class="sidebar-mini-icon">
<i class="fa fa-ellipsis-h"></i>
</span>
<h4 class="text-section">Menu</h4>
</li>
<li class="nav-item">
<a href="#">
<i class="fas fa-home"></i>
<p>Beranda</p>
</a>
</li>
<li class="nav-item">
<a href="form.php">
<i class="icon-layers"></i>
<p>Form</p>
</a>
</li>
</ul>
</div>
</div>
</div>
6. selanjutnya mengisi file footer.php dengan script yang ada pada index.html mulai dari <footer>.
7. kemudian buat file index.php sejajar dengan folder assets dan layout. dan isikan conten yang diinginkan. bisa ambil
dari index.html yang ada pada template atlantis mulai dari <div class="main-panel">. tapi letakkan script berikut di
awal baris.
8. Dan diakhir baris ditambahkan script seperti pada gambar.
9. Setelah berhasil maka tampilan akan seperti ini

10. selanjutnya buat file baru bernama form.php untuk membuat tampilan data tabel.
11. setelah membuat halaman form kemudian tambahkan menu form pada header.php sejajar dengan beranda.
12. jika sudah sesuai maka tampilannya seperti ini.

13. selanjutnya kita akan menambah halaman tambah data. buat file baru bernama tambah_data.php dan isikan script sesuai dengan yang akan
ditampilkan pada tabel.
14. sama halnya dengan halaman edit silahkan buat halaman tampilan sesuai data yang ada pada tabel. untuk fungsi tambah data edit dan hapus data akan
dilanjutkan pada praktikum selanjutnya.

Praktikum 5

Diunggah oleh

Informasi Dokumen

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

Praktikum 5

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM

4. Kemudian membuat file header.php dan footer.php didalam folder layout.

<a href="index.html" class="logo">

9. Setelah berhasil maka tampilan akan seperti ini

12. jika sudah sesuai maka tampilannya seperti ini.

Anda mungkin juga menyukai