Assalamu'alaikum wr.wb.
A. Pengertian
Menurut wikipedia bahasa Indonesia, Portal web adalah situs web yang menyediakan kemampuan tertentu yang dibuat sedemikian rupa mencoba menuruti selera para pengunjungnya. Kemampuan portal yang lebih spesifik adalah penyediaan kandungan informasi yang dapat diakses menggunakan beragam perangkat, misalnya komputer pribadi, komputer jinjing (notebook), PDA (Personal Digital Assistant), atau bahkan telepon genggam.
B. Latar Belakang
Perkembangan ilmu pengetahuan dan teknologi telah memperlihatkan kemajuan yang sangat pesat untuk dapat diaplikasikan disemua bidang. Salah satu contoh kemajuan itu adalah dengan terciptanya komputer dan internet, dimana komputer mempunyai banyak kegunaan serta kepraktisan kerja yang sangat tinggi untuk mengolah data yang rumit dan dalam jumlah yang banyak, sedangkan internet dapat menyajikan banyak informasi tanpa memerlukan biaya dan waktu yang banyak. Perkembangan Teknologi Internet yang pesat telah memicu munculnya berbagai aplikasi baru termasuk di bidang Teknologi Informasi. Website adalah salah satu revolusi dibidang informasi berbasis teknologi internet. Website diharapkan dapat dijadikan alternative bagi pengembangan sistem informasi yang lebih efektif dan efesien dengan biaya yang lebih rendah dimasa mendatang. Hal ini dapat berjalan lancar apabila ada suatu jaringan internet. Salah satu bidang yang mendapatkan dampak yang cukup berarti dengan perkembangan teknologi ini adalah bidang pendidikan, dimana pada dasarnya pendidikan merupakan suatu proses komunikasi dan informasi dari pendidik kepada peserta didik yang berisi informasi pendidikan, yang memiliki unsur‐unsur pendidik sebagai sumber informasi, media sebagai sarana penyajian ide, gagasan dan materi pendidikan serta peserta didik itu sendiri, beberapa bagian unsur ini mendapatkan sentuhan media teknologi informasi.
C. Alat dan Bahan
- Text Editor
- OS Linux Mint 18.1 Serena
- Web Browser
D. Tujuan
Bertujuan untuk memberi informasi serta pengetahuan dari penerapan portal sekolah. Informasi yang dapat diakses oleh semua orang, agar sekolah lebih maju.
E. Pembahasan
Pada pembahasan kali ini kita akan membuat portal tentang sekolah yaitu Portal SMK Negeri 2 Karanganyar. Disini akan diulas sedikit tentang tahapan untuk membuat index.php nya terlebih dahulu. Dibawah ini merupakan sintaks index nya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Pemanggilan Link -->
<title>.: PORTAL INFORMASI SMKN 2 KARANGANYAR :. </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="style/js/materialize.min.js">
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="fonts/Roboto-Bold.ttf">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body background="img/smk2new.jpg" class="responsive-img" style="background-attachment:fixed; size:100%;">
<marquee style="background-color :teal; font-size:20px; color: white;" class="marquee" behavior="alternate">
..:: PORTAL INFORMASI SEKOLAH SMK N 2 KARANGANYAR ::..
</marquee>
<center>
<h1 style="color: white; text-shadow: 2px 2px 4px #000000;">
PORTAL SISTEM INFORMASI SEKOLAH
<br>SMK NEGERI 2 KARANGANYAR
</h1>
<!-- Logo SMK -->
<img class="responsive-img" src="img/logo.png" style="width:300px; height:280px;">
<br>
<!-- ALamat SMK -->
<h4 style="color: white; text-shadow: 2px 2px 10px #000000;">
JL. YOS SUDARSO , BEJEN , KARANGANYAR 57716
<br>TELP:(0271) 494549 - E-MAIL: smkn2kra@yahoo.co.id
</h4><br>
<!-- Button Cari -->
<div class="row">
<div class="col s12 m4"></div>
<div class="col s12 m4">
<nav>
<div class="nav-wrapper white">
<form>
<div class="input-field">
<input id="search" type="search" placeholder="Cari disini" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
</div>
<div class="col s12 m4"></div>
</div>
</center>
<br>
<br>
<!-- Jurusan -->
<div class="row">
<div class="col s12 m6">
<div class="card horizontal">
<div class="card-image">
<img id="gambar" src="img/mesin.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<p id="teknik" style="">TEKNIK PEMESINAN</p>
</div>
<div class="card-action">
<a data-position="bottom" data-delay="50" data-tooltip="Pemesinan" href="mesin.html" class="btn waves-effect waves-light tooltipped"><i class="fa fa-chevron-right"></i> Baca Lagi</a>
</div>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card horizontal">
<div class="card-image">
<img src="img/oto.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<p id="teknik" style="">TEKNIK OTOTRONIK</p>
</div>
<div class="card-action">
<a href="oto.html" class="waves-effect waves-light btn"><i class="fa fa-chevron-right"></i> Baca Lagi</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6">
<div class="card horizontal">
<div class="card-image">
<img src="img/rpl.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<p id="teknik" style="">TEKNIK RPL</p>
</div>
<div class="card-action">
<a href="rpl.html" class="waves-effect waves-light btn"><i class="fa fa-chevron-right"></i> Baca Lagi</a>
</div>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card horizontal">
<div class="card-image">
<img src="img/kain.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<p id="teknik" style="">TEKNIK PEMBUATAN KAIN</p>
</div>
<div class="card-action">
<a href="kain.html" class="waves-effect waves-light btn"><i class="fa fa-chevron-right"></i> Baca Lagi</a>
</div>
</div>
</div>
</div>
</div>
<center>
<img class="responsive-img" src="img/smkbisa.png" style="width:300px; height:290px;">
</center>
<!-- Footer -->
<footer class="page-footer teal darken-3">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Developed By : </h5>
<p class="grey-text text-lighten-4"> <i class="fa fa-user"></i> Muhammad Fajar Shodiq</p>
<p class="grey-text text-lighten-4"> <i class="fa fa-user"></i> Fadila Junitaningsih</p>
<p class="grey-text text-lighten-4"> <i class="fa fa-user"></i> Allif Sulthoni A</p>
<p class="grey-text text-lighten-4"> <i class="fa fa-home"></i> SMK N 2 Karanganyar</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Contact</h5>
<ul>
<li><a href="https://www.facebook.com/smkn2kra/?ref=ts&fref=ts" class="grey-text text-lighten-3"><i class="fa fa-facebook-square"></i> Facebook</a></li>
<li><a href="#" class="grey-text text-lighten-3"><i class="fa fa-phone-square"></i> (0271) 494549 </a></li>
<li><a href="#" class="grey-text text-lighten-3"><i class="fa fa-twitter-square"></i> Twitter</a></li>
<li><a href="#" class="grey-text text-lighten-3"><i class="fa fa-envelope"></i> smkn2kra@yahoo.co.id</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2017 Copyright Muhammad Fajar Shodiq
<a class="grey-text text-lighten-4 right" href="http://muhfajarshodiq.blogspot.co.id/"><i class="fa fa-rss"></i> Blog</a>
</div>
</div>
</footer>
</body>
</html>
- Dan hasilnya akan seperti dibawah ini.
- Kalau teman-teman ingin mengetahui lebih lanjut tentang isi dari portal ini, teman-teman dapat mendapatkannya disini.
F. Kesimpulan
Dari pembahasan diatas dapat ditarik kesimpulan bahwa penggunaan portal dalam pendidikan juga amatlah penting, yaitu berperan sebagai penyampai informasi ke semua orang yang ingin lebih tau suatu instansi suatu sekolah seperti apa.
G. Referensi
- https://id.wikipedia.org/wiki/Portal_web
Sekian dan Terimakasih.
SMK Bisa !!
Wasalamu'alaikum wr.wb.
0 komentar:
Posting Komentar