A. Pendahuluan
Oke gays pada kesempatan ini saya akan berbagi tentang script untuk membuat halaman hostpot sekolah.
1. Pengertian
Halaman adalah tampilan dari beberapa perangkat atau pun gambar yang di pancarkan
Hostpot adalah service yang berguna untukmenyebarkan signal ataupun memperluas signal kepada khalayak atau umum untuk dapat ter jaring pada internet.
2. Latar belakang
kurang menariknya halaman login di sekolah maka kami terbangun untuk membuat halaman login yang berbasis sekolah.
3. Maksud dan tujuan
dengan adanya halaman itu maka orang akan berfikir maju dan akan lebih semangat lagi dalam memanfaatkan hostpot untuk belajar. karena background yang di ambil adala background sekolah.
4. Hasil yang di harapkan
Dapat memberikan motivasi kepada seseorang dengan halaman hoastpot tersebut
B. Alat dan bahan
1. Laptop
2. RouteBoard Mikrotik
C. Jangka waktu
08:00-15:00
D. Tahapan kerja
1. menambahkan script pada sebuah halaman hostpot yan sudah jadi
2. Pertama marilah kita membuat titlle atau judul hostpotnya.
Dengan cara memasukan script : <title>HOSTPOT SMK MUHAMMADIYAH 1 AJIBARANG</title>
3. kmudian kita menambahkan jenis font yang akan di gunakan.
Dengan script sebagai berikut :
@font-face{
src: url("VarelaRound-Regular.ttf");
font-family: Times New Roman;
}
4. menambahan jenis huruf pada body di halaman hostpot. masukan scriot berikut.
body{
font-family: Times New Roman;
margin: 0;
color: #4183b7;
}
5. kemudian kita akan memfilter halaman hostpot supaya tidak terlalu cerah dan tidak terlalu mencolok warnanya.
ini gambar sebelum di filter :
Setelah saya memberikan atau memasukan secrript sebagai berikut :
.filter{
background: rgba(44, 50, 48, 0.7);
left: 0px;
top: 0px;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
z-index: -99999;
position: fixed;
}
Setelah saya memasukan scipt di atas tampilan yang muncul adalah sebagai berikut :
Dan gambar pada halaman hostpot sudah agak gelap.
6. kita akan membuat form untuk tempat pasword dan ketika kita belum membuat form maka tampilan akan seperti di bawah ini
kemudian ketika melihat tampilan di atas pasti maka tidak terlalu indah yah jika di terapkan untuk hoatpot sekolah.
jadi saya kemudian memasukan script :
form{
margin: 0 auto;
width: 30%;
}
.form-header{
background: transparent;
padding: 15px 15px;
border: 2px solid #4183b7;
text-align: center;
color: white;
font-size: 20px;
font-weight: bold;
}
nah kemudian tampilan akan rapi dan indah ketika menambahkan dan mengatur form untuk login
7. kemudian kita aka membuat gambar berganti pada hostpot maka saya menmbahkan perintah berikut
<script src="jquery.js"></script>
<script src="jquery.backstretch.js"></script>
<script>
$.backstretch([
"img/7.jpg",
"img/9.jpg",
"img/15.jpg",
"img/12362883_1734351450129593_874380943214076251_o.jpg",
"img/novi3 copy.jpg"
], {
fade: 750,
duration: 4000
});
</script>
E. Temuan masalah
Pada saat membuat halaman gambar yang berganti itu ada yang salah dalam menambahkan script dan penyimpanan gambar.
tapi setlah saya coba menyimpan gambar dalam satu folder maka saya masukan perintah seperti di atas maka jadilah gambar berjalan
F. Hasil yang didapatkan
dapat menambahkan script pada halaman hostpot sekolah dengan background sekolah.
G. Kesimpuan
jadi halaman hostpot ini juga dapat digunakan menjadi halaman hostpot yang memberi nuansa sekolah yang tinggi
dan pada temuan masalah di atas saya menyimpulkan bahwa ketika akan membuat background berjalan maka gambar di simpan dalam satu folder.
H. Referensi
1. https://id.wikipedia.org/wiki/Halaman
Oke gays pada kesempatan ini saya akan berbagi tentang script untuk membuat halaman hostpot sekolah.
1. Pengertian
Halaman adalah tampilan dari beberapa perangkat atau pun gambar yang di pancarkan
Hostpot adalah service yang berguna untukmenyebarkan signal ataupun memperluas signal kepada khalayak atau umum untuk dapat ter jaring pada internet.
2. Latar belakang
kurang menariknya halaman login di sekolah maka kami terbangun untuk membuat halaman login yang berbasis sekolah.
3. Maksud dan tujuan
dengan adanya halaman itu maka orang akan berfikir maju dan akan lebih semangat lagi dalam memanfaatkan hostpot untuk belajar. karena background yang di ambil adala background sekolah.
4. Hasil yang di harapkan
Dapat memberikan motivasi kepada seseorang dengan halaman hoastpot tersebut
B. Alat dan bahan
1. Laptop
2. RouteBoard Mikrotik
C. Jangka waktu
08:00-15:00
D. Tahapan kerja
1. menambahkan script pada sebuah halaman hostpot yan sudah jadi
2. Pertama marilah kita membuat titlle atau judul hostpotnya.
Dengan cara memasukan script : <title>HOSTPOT SMK MUHAMMADIYAH 1 AJIBARANG</title>
3. kmudian kita menambahkan jenis font yang akan di gunakan.
Dengan script sebagai berikut :
@font-face{
src: url("VarelaRound-Regular.ttf");
font-family: Times New Roman;
}
4. menambahan jenis huruf pada body di halaman hostpot. masukan scriot berikut.
body{
font-family: Times New Roman;
margin: 0;
color: #4183b7;
}
5. kemudian kita akan memfilter halaman hostpot supaya tidak terlalu cerah dan tidak terlalu mencolok warnanya.
ini gambar sebelum di filter :
Setelah saya memberikan atau memasukan secrript sebagai berikut :
.filter{
background: rgba(44, 50, 48, 0.7);
left: 0px;
top: 0px;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
z-index: -99999;
position: fixed;
}
Setelah saya memasukan scipt di atas tampilan yang muncul adalah sebagai berikut :
Dan gambar pada halaman hostpot sudah agak gelap.
6. kita akan membuat form untuk tempat pasword dan ketika kita belum membuat form maka tampilan akan seperti di bawah ini
kemudian ketika melihat tampilan di atas pasti maka tidak terlalu indah yah jika di terapkan untuk hoatpot sekolah.
jadi saya kemudian memasukan script :
form{
margin: 0 auto;
width: 30%;
}
.form-header{
background: transparent;
padding: 15px 15px;
border: 2px solid #4183b7;
text-align: center;
color: white;
font-size: 20px;
font-weight: bold;
}
nah kemudian tampilan akan rapi dan indah ketika menambahkan dan mengatur form untuk login
7. kemudian kita aka membuat gambar berganti pada hostpot maka saya menmbahkan perintah berikut
<script src="jquery.js"></script>
<script src="jquery.backstretch.js"></script>
<script>
$.backstretch([
"img/7.jpg",
"img/9.jpg",
"img/15.jpg",
"img/12362883_1734351450129593_874380943214076251_o.jpg",
"img/novi3 copy.jpg"
], {
fade: 750,
duration: 4000
});
</script>
E. Temuan masalah
Pada saat membuat halaman gambar yang berganti itu ada yang salah dalam menambahkan script dan penyimpanan gambar.
tapi setlah saya coba menyimpan gambar dalam satu folder maka saya masukan perintah seperti di atas maka jadilah gambar berjalan
F. Hasil yang didapatkan
dapat menambahkan script pada halaman hostpot sekolah dengan background sekolah.
G. Kesimpuan
jadi halaman hostpot ini juga dapat digunakan menjadi halaman hostpot yang memberi nuansa sekolah yang tinggi
dan pada temuan masalah di atas saya menyimpulkan bahwa ketika akan membuat background berjalan maka gambar di simpan dalam satu folder.
H. Referensi
1. https://id.wikipedia.org/wiki/Halaman
