Scribd
Upload
11 views9 pages

Materi

The document provides code snippets and content for setting up a website about an Islamic vocational high school (SMK Islamiyah) using Bootstrap and FontAwesome. It includes code for the index, content, and media files which contain the template layout and include pages for the home, departments, and other sections. The home page section provides an introduction to the school's history and activities.

Uploaded by

rifaldonextas10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views9 pages

Materi

The document provides code snippets and content for setting up a website about an Islamic vocational high school (SMK Islamiyah) using Bootstrap and FontAwesome. It includes code for the index, content, and media files which contain the template layout and include pages for the home, departments, and other sections. The home page section provides an introduction to the school's history and activities.

Uploaded by

rifaldonextas10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Materi Praktikum Bootstrap 5

Perisapan file bootstrap dan fontawesome

Gambar 1

Kode program index.php


<?php
header("location:media.php?page=home");

Kode program content.php


<?php
if ($_GET["page"] == "home") {
include "home.php";
} else if ($_GET["page"] == "jurusan") {
include "jurusan.php";
} else {
echo "<p>Modul tidak ada. Masih dalam pengerjaan.</p>";
}

Kode program media.php


<!doctype html>
<html lang="en">

<head>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.88.1">

<!-- Title this website -->


<title>SMK Islamiyah</title>

<!-- Documentation about album bootstrap v5.1 -->


<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/navbar-fixed/">

<!-- Bootstrap core CSS -->


<!-- Bootstrap version 5.1.3 -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

<!-- Custom template bootstrap -->


<link rel="stylesheet" href="assets/bootstrap/navbar-top-fixed.css">
<link rel="stylesheet" href="assets/bootstrap/footers.css">
<!-- Icons core CSS -->
<!-- Font-Awesome version 6.2.0 -->
<link rel="stylesheet" href="assets/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/fontawesome/css/brands.min.css">
<link rel="stylesheet" href="assets/fontawesome/css/solid.min.css">

<!-- Style for page index -->


<style>
p {
text-align: justify;
}

.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

@media (min-width: 768px) {


.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>

<body>
<!-- ------------------------------------------------------------------------------------ -->
<!-- header and navbar ------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark bg-gradient fixed-top">
<div class="container">
<a class="navbar-brand" href="#">SMK Islamiyah Ciputat</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto mb-auto mb-md-auto">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="?page=home">
<i class="fa-solid fa-house-user"></i> Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="?page=profil">
<i class="fa-solid fa-book"></i> Profil
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="?page=jurusan">
<i class=" fa-solid fa-graduation-cap"></i> Jurusan
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="?page=galeri-foto">
<i class="fa-solid fa-camera"></i> Galeri Foto
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="?page=galeri-video">
<i class="fa-solid fa-video"></i> Galeri Video
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="?page=kontak-kami">
<i class="fa-solid fa-envelope"></i> Kontak Kami
</a>
</li>
<!-- /. menu-list -->
</ul>
<!-- /. navbar-list -->
</div>
<!-- /. navbar-collapse -->
</div>
<!-- /. container -->
</nav>
<!-- /. navbar -->
</header>
<!-- ------------------------------------------------------------------------------------ -->
<!-- /.header and navbar ---------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------------------ -->

<!-- ------------------------------------------------------------------------------------ -->


<!-- main content ----------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------------------ -->
<main class="container">

<div class="row mb-3">


<div class="col-md-8">
<?php include "content.php"; ?>
</div>
<!-- /.col content-left -->

<div class="col-md-4">
<!-- Tanggal Penting -->
<div class="p-3 mb-3 bg-info bg-gradient bg-opacity-25 rounded">
<h5 class="fst-normal">
<i class="fa-solid fa-calendar-days"></i> Tanggal Penting
</h5>
<ul>
<li>02 Mei - Hari Pendidikan</li>
<li>28 Okt - Hari Sumpah Pemuda</li>
<li>10 Nov - Hari Pahlawan</li>
</ul>
</div>

<!-- Tanggal Penting -->


<div class="p-3 mb-3 bg-info bg-gradient bg-opacity-25 rounded">
<h5 class="fst-normal"><i class="fa-solid fa-book"></i> Ekstrakurikuler</h5>
<ul>
<li>Pramuka</li>
<li>Paskribaka</li>
<li>Basket</li>
<li>Volly</li>
</ul>
</div>

<!-- Kerja Sama Industri -->


<div class="p-3 mb-3 bg-info bg-gradient bg-opacity-25 rounded">
<h5 class="fst-normal">
<i class="fa-solid fa-handshake-simple"></i> Kerja Sama Industri
</h5>
<ul>
<li>UIN Syarif Hidayatullah Jakarta</li>
<li>PT. Telkom Jakarta</li>
<li>PT. Jaya Real Property</li>
<li>PT. Hero Supermarket Jakarta</li>
</ul>
</div>
</div>
<!-- /.col content-right -->
</div>
<!-- /.row content-->

</main>
<!-- ------------------------------------------------------------------------------------ -->
<!-- /.main content --------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------------------ -->
<!-- Javascript for custom template boostrap 5 -->
<script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Javascript for custom fontawesome 6.2.0 -->


<script src="assets/fontawesome/js/fontawesome.min.js"></script>
<script src="assets/fontawesome/js/brands.min.js"></script>
<script src="assets/fontawesome/js/solid.min.js"></script>
</body>

</html>

Kode program home.php


<!-- ------------------------------------------------------------------------------------ -->
<!-- Sejarah SMK ------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->
<article class="blog-post">
<h2 class="blog-post-title">Selamat Datang di SMK Islamiyah Ciputat</h2>
<p class="blog-post-meta">Didirikan pada tahun 1965 oleh Drs. H. Zarkazih Noer yang mempelopori
pembangunan Yayasan Islamiyah Ciputat ini. Awalnya proses kegiatan belajar mengajar terpaksa
dilakukan di gedung sekolah swasta lain karena yayasan belum mempunyai gedung sendiri. Namun
kini Yayasan Islamiyah Ciputat telah memiliki gedung sendiri.</p>
<p class="blog-post-meta">Mengedepankan pendidikan berorientasi pada prinsip-prinsip islam yang
bernaungan IPTEK & IMTAQ merupakan visi dari yayasan ini dalam mendidik dan membimbing anak
didiknya agar menjadi insan-insan muda yang berkualitas, berprestasi serta berakhlak baik.
Terlebih lagi dengan adanya dukungan i-Skola layanan info penting kepada Orangtua/ Wali murid.
Diharapkan lulusan yayasan ini selain memiliki wawasan IPTEK yang luas juga memahami, mendalami
dan menguasai kaidah serta ajaran Islam yang telah ditanamkan kepada mereka selama mengenyam
bangku pendidikan di Yayasan Islamiyah Ciputat. Kedua hal tersebut dirasa bisa menjadi bekal
bagi masa depan mereka</p>
<p class="blog-post-meta">Beberapa kegiatan ekstrakurikuler seperti paskibra, marawis atau futsal
menjadi sarana bagi anak didik yayasan Islamiyah untuk menyalurkan minat, bakat dan kreatifitas
mereka. Salah satu prestasi yang bisa dibanggakan dari yayasan ini yaitu Pasukan Pengibar
Bendera Pusaka (PASKIBRAKA) SMA Islamiyah Ciputat pernah mewakili kabupaten Tangerang di
tingkat nasional.</p>
</article>
<!-- ------------------------------------------------------------------------------------ -->
<!-- /.Sejarah SMK Islamiyah ------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------------ -->

<!-- ------------------------------------------------------------------------------------ -->


<!-- Visi dan Misi SMK Islamiyah -------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------------------ -->
<article class="blog-post">
<!-- Visi -->
<h3 class="blog-post-title">Visi Satuan Pendidik</h3>
<p class="blog-post-meta">Membangun Sumber Daya Manusia (Sdm) Yang Berkualitas, Terampil , Dan
Mampu Bersaing Pada Mampu Bersaing Pada Tingkat Nasional Maupun Global Dilandasi Iman Dan Taqwa
Sesuai Ajaran Ahlusunnah Waljamaah.</p>

<!-- Misi -->


<h3 class="blog-post-title">Misi Satuan Pendidik</h3>
<p>1. Membina Dan Membimbing Peserta Didik Untuk Memiliki Dan Mengamankan Ajaran Islam Serta
Berakhlak Mulia Sesuai Dengan Ajaran Ahlusunnah Waljamaah</p>
<p>2. Membentuk Peserta Didik Untuk Memiliki Jiwa Kewirausaahan</p>
<p>3. Membina Peserta Didik Yang Siap Menjadi Tenaga Kerja Yang Profesional Dan Amanah Dalam Bidang
Teknologi Informasi Dan Bisnis Manajemen</p>
<p>4. Membina Peserta Didik Yang Siap Menjadi Tenaga Kerja Yang Profesional Dan Amanah Dalam Bidang
Teknologi Informasi Dan Bisnis Manajemen</p>
</article>
<!-- ------------------------------------------------------------------------------------ -->
<!-- /. Visi dan Misi SMK Islamiyah ----------------------------------------------------- -->
<!-- ------------------------------------------------------------------------------------ -->

Kode program jurusan.php


<div class="row mb-3">
<!-- TEKNIK KOMPUTER JARINGAN -->
<div class="col-md-6">
<div class="card bg-light bg-gradient bg-opacity-25">
<div class="card-header">
<h5 class="card-titles">Teknik Komputer Jaringan</h5>
</div>
<!-- /. card-header -->
<div class="card-body">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%"
fill="#eceeef" dy=".3em">Thumbnail</text>
</svg>
</div>
<!-- /. card-body -->
<div class="card-footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi.</p>
</div>
<!-- /. card-footer -->
</div>
<!-- /. card -->
</div>
<!-- /. col-md-6 -->

<!-- MULTIMEDIA -->


<div class="col-md-6">
<div class="card bg-light bg-gradient bg-opacity-25">
<div class="card-header">
<h5 class="card-titles">Multimedia</h5>
</div>
<!-- /. card-header -->
<div class="card-body">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%"
fill="#eceeef" dy=".3em">Thumbnail</text>
</svg>
</div>
<!-- /. card-body -->
<div class="card-footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi.</p>
</div>
<!-- /. card-footer -->
</div>
<!-- /. card -->
</div>
<!-- /. col-md-6 -->
</div>
<!-- /. row -->

<div class="row mb-3">


<!-- AKUTANSI DAN KEUANGAN -->
<div class="col-md-6">
<div class="card bg-light bg-gradient bg-opacity-25">
<div class="card-header">
<h5 class="card-titles">Akutansi dan Keuangan</h5>
</div>
<!-- /. card-header -->
<div class="card-body">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%"
fill="#eceeef" dy=".3em">Thumbnail</text>
</svg>
</div>
<!-- /. card-body -->
<div class="card-footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi.</p>
</div>
<!-- /. card-footer -->
</div>
<!-- /. card -->
</div>
<!-- /. col-md-6 -->

<!-- BISNIS DARING dan PEMASARAN -->


<div class="col-md-6">
<div class="card bg-light bg-gradient bg-opacity-25">
<div class="card-header">
<h5 class="card-titles">Bisnis Daring dan Pemasaran</h5>
</div>
<!-- /. card-header -->
<div class="card-body">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%"
fill="#eceeef" dy=".3em">Thumbnail</text>
</svg>
</div>
<!-- /. card-body -->
<div class="card-footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi.</p>
</div>
<!-- /. card-footer -->
</div>
<!-- /. card -->
</div>
<!-- /. col-md-6 -->
</div>
<!-- /. row -->

<div class="row mb-3">


<!-- TATA BOGA -->
<div class="col-md-6">
<div class="card bg-light bg-gradient bg-opacity-25">
<div class="card-header">
<h5 class="card-titles">Tata Boga</h5>
</div>
<!-- /. card-header -->
<div class="card-body">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%"
fill="#eceeef" dy=".3em">Thumbnail</text>
</svg>
</div>
<!-- /. card-body -->
<div class="card-footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi.</p>
</div>
<!-- /. card-footer -->
</div>
<!-- /. card -->
</div>
<!-- /. col-md-6 -->

<!-- Tata Kelola Perkantoran -->


<div class="col-md-6">
<div class="card bg-light bg-gradient bg-opacity-25">
<div class="card-header">
<h5 class="card-titles">Tata Kelola Perkantoran</h5>
</div>
<!-- /. card-header -->
<div class="card-body">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%"
fill="#eceeef" dy=".3em">Thumbnail</text>
</svg>
</div>
<!-- /. card-body -->
<div class="card-footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi.</p>
</div>
<!-- /. card-footer -->
</div>
<!-- /. card -->
</div>
<!-- /. col-md-6 -->
</div>
<!-- /. row -->

Gambar 2. Tampilan Home


Gambar 3. Tampilan Jurusan

You might also like