DAY 13 PKL ISTN

Assalamualaikum wr wb

Masih dengan Fauzan Blog's. Gimana kabarnya nih para penghirup oksigen semua? Masih pada sehat semua kan? semoga sehat selalu ya.. Amin..

Hari ketigabelas nulis di Blog, Oke langsung saja saya mulai ceritanya.. Ekhm Ekhm..

Rabu, 17 Juli 2024

Hari ketigabelas PKL

Hari ketigabelas saya PKL di FSTI ISTN. Masih ditemani oleh ketiga teman saya yaitu Asep, Habib dan Parel. Hari ketigabelas, Setelah kami datang sekitar jam 8.30 kami langsung mengerjakan tugas yang sudah diberikan dihari sebelumnya, kami melakukan bersih bersih sesuai dengan tugas masing masing, saya menyapu lantai laintai yang ada di lab.

gambar 1 sedang menyapu lantai.

Setelah kami mengerjakan tugas piket masing-masing kami melanjutkan mengerjakan tugas yang diberikan oleh pak adi untuk membuat web yang menjelaskan tentang berbagai software dan web server, tugas ini tugas untuk dua hari, kami langsung lanjut mengerjakannya.

Website

Untuk web kali ini tidak menggunakan database karena hanya berisi penjelasan penjelasan saja, Untuk hari ini web yang saya sudah membuat semua halaman web dan untuk css nya saya menggunakan css eksternal dengan nama file styles.css. saya telah menambahkan desain pada halaman index.php dan android.php. Bagi yang ingin melihat tampilan inex sebelum diubah kalian bisa lihat di sini : DAY 12 PKL ISTN.

Berikut ini tampilan, kodingan dan penjelasan halaman web 'index.php' :

gambar 2 halaman index web.

Fungsi Halaman Index Web

1. Navigasi Utama:

   • Akses mudah ke halaman Home, Tentang, Layanan, Kontak, Buku Tamu, dan Login melalui menu di header.

2. Sidebar Navigasi:

   • Akses cepat ke topik pengembangan aplikasi dan basis data seperti Android Studio, Objective C, Unity 3D, HTML5, SQL-Server, dan lainnya, dengan ikon dari Font Awesome.

3. Konten Utama:

   • Menyambut pengguna dengan pesan selamat datang dan informasi singkat tentang tujuan dashboard.

4. Footer:

   • Menyediakan informasi hak cipta.

Manfaat

• Kemudahan Akses: Navigasi jelas dan terstruktur untuk menemukan informasi.
• Pengelolaan Konten: Tempat terorganisir untuk mengelola pengembangan aplikasi dan basis data.
• Desain Responsif: CSS memastikan tampilan baik di berbagai perangkat.

Dashboard Web ini berfungsi sebagai pusat informasi yang komprehensif dan mudah diakses untuk pengembangan aplikasi dan manajemen basis data.

Dan untuk halaman web seterusnya hampir sama semua dan karena akan panjang jika saya jelaskan satu persatu, jadi saya akan membuatkan satu penjelasan untuk semua halaman web yang akan diberikan.

Website yang didesain dalam kode HTML tersebut berfungsi sebagai dashboard informasi untuk berbagai topik terkait pengembangan aplikasi dan database. Berikut penjelasan mengenai kegunaan utamanya:

1. Informasi dan Edukasi

• Topik Pengembangan Aplikasi: Menyediakan penjelasan dan informasi mengenai berbagai platform pengembangan aplikasi seperti Android Studio, Objective C, App Inventor, Intel XDK, Unity 3D, dan lainnya.
• Topik Basis Data: Menyediakan informasi mengenai berbagai sistem manajemen basis data seperti MySQL, SQL Server, MongoDB, Firebase, dan lain-lain.

2. Navigasi Mudah

• Header Navigation: Menyediakan menu navigasi utama yang mengarahkan pengguna ke halaman utama, tentang, layanan, kontak, buku tamu, dan login.
• Sidebar Navigation: Menyediakan navigasi samping yang mengarahkan pengguna ke berbagai topik spesifik tentang pengembangan aplikasi dan database.

3. Konten Utama

• Deskripsi dan Penjelasan: Setiap halaman utama menyediakan deskripsi dan penjelasan mendetail mengenai satu topik tertentu, dalam contoh ini adalah tentang App Inventor.
• Visualisasi dengan Gambar: Menyediakan gambar relevan untuk membantu visualisasi dan pemahaman pengguna tentang topik yang dijelaskan.

4. Referensi untuk Pengembangan Aplikasi

• Pengembangan Aplikasi Mobile: Memberikan panduan dan referensi untuk pengembangan aplikasi mobile menggunakan berbagai platform dan teknologi.
• Integrasi dan Simulasi: Informasi tentang bagaimana berbagai alat dan platform dapat digunakan untuk simulasi, pemrosesan gambar, dan analitik data.

5. Sumber Daya Tambahan

• Penggunaan Ikon: Penggunaan ikon dari Font Awesome untuk memperjelas dan memperindah navigasi.
• Respon Desain: Desain responsif yang menyesuaikan tampilan di berbagai perangkat untuk kenyamanan pengguna.

Contoh Kegunaan Website:

1. Belajar dan Referensi: Pengguna dapat mempelajari berbagai topik terkait pengembangan aplikasi dan database, dengan informasi yang tersusun rapi dan mudah diakses.
2. Proyek dan Penelitian: Membantu pengembang dan peneliti dalam mendapatkan informasi mendalam tentang alat dan teknologi yang diperlukan untuk proyek mereka.
3. Pengembangan Profesional: Sumber daya yang berguna bagi pengembang aplikasi dan database untuk memperbarui pengetahuan dan keterampilan mereka.

Dengan desain yang informatif dan terstruktur, website ini sangat berguna sebagai alat belajar dan referensi bagi siapa saja yang tertarik dalam dunia pengembangan aplikasi dan manajemen basis data.

Berikut ini tampilan dan kodingan halaman web 'android.php' :

gambar 3 halaman web android studio.

Berikut ini tampilan dan kodingan halaman web 'iphone.php' :

gambar 4 halaman web iphone swift.

Berikut ini tampilan dan kodingan halaman web 'objective.php' :

gambar 5 halaman web objective c.

Berikut ini tampilan dan kodingan halaman web 'appinventor.php' :

gambar 6 halaman web app inventor.

Berikut ini tampilan dan kodingan halaman web 'intel.php' :

gambar 7 halaman web intel xdk.

Berikut ini tampilan dan kodingan halaman web 'unity.php' :

gambar 8 halaman web unity 3d for mobile.

Berikut ini tampilan dan kodingan halaman web 'flash.php' :

gambar 9 halaman web flash as3.

Berikut ini tampilan dan kodingan halaman web 'html5.php' :

gambar 10 halaman web html5 bootstrap.

Berikut ini tampilan dan kodingan halaman web 'phonegab.php' :

gambar 11 halaman web phonegab + database.

Berikut ini tampilan dan kodingan halaman web 'jquery.php' :

gambar 12 halaman web jquery mobile + mysql.

Berikut ini tampilan dan kodingan halaman web 'j2micro.php' :

gambar 13 halaman web j2micro edition.

Berikut ini tampilan dan kodingan halaman web 'kotlin.php' :

gambar 14 halaman web kotlin.

Berikut ini tampilan dan kodingan halaman web 'flutter.php' :

gambar 15 halaman web flutter.

Berikut ini tampilan dan kodingan halaman web 'apache.php' :

gambar 16 halaman web apache cordova.

Berikut ini tampilan dan kodingan halaman web 'ionic.php' :

gambar 17 halaman web ionic.

Berikut ini tampilan dan kodingan halaman web 'kodular.php' :

gambar 18 halaman web kodular.

Berikut ini tampilan dan kodingan halaman web 'sql.php' :

gambar 19 halaman web sql-server.

Berikut ini tampilan dan kodingan halaman web 'mysql.php' :

gambar 20 halaman web mysql-mysqli.

Berikut ini tampilan dan kodingan halaman web 'mariadb.php' :

gambar 21 halaman web mariadb.

Berikut ini tampilan dan kodingan halaman web 'mongodb.php' :

gambar 22 halaman web mongodb.

Berikut ini tampilan dan kodingan halaman web 'sqlite.php' :

gambar 23 halaman web sqlite.

Berikut ini tampilan dan kodingan halaman web 'msaccess.php' :

gambar 24 halaman web msaccess.

Berikut ini tampilan dan kodingan halaman web 'oracle.php' :

gambar 25 halaman web oracle 11.

Berikut ini tampilan dan kodingan halaman web 'firebase.php' :

gambar 26 halaman web firebase google.

Berikut ini tampilan dan kodingan halaman web 'postgresql.php' :

gambar 27 halaman web postgresql.

Berikut ini tampilan dan kodingan halaman web 'firebird.php' :

gambar 28 halaman web firebird rdbms.

Berikut ini tampilan dan kodingan halaman web 'ibm.php' :

gambar 29 halaman web ibm db2.

Berikut ini penjelasan dan kodingan halaman web 'styles.css' :

penjelasan singkat dari fungsi kode CSS yang diberikan:

Body

• Mengatur font, menghilangkan margin dan padding, serta menetapkan gambar latar belakang tetap.

Container Welcome

• Mengatur konten utama dengan latar belakang putih, padding, border-radius, warna teks hitam, dan transparansi.

Container

• Menentukan lebar maksimum, margin tengah, dan padding untuk elemen.

Paragraph (p)

• Menentukan ukuran font paragraf menjadi besar.

Header

• Menetapkan latar belakang gelap, teks putih, dan padding. Menggunakan flexbox untuk tata letak elemen dalam header, menghilangkan tanda bullet pada daftar, serta mengatur efek hover untuk navigasi.

Sidebar

• Mengatur sidebar di sebelah kiri dengan lebar tetap, latar belakang gelap, teks putih, padding, dan scrollbar vertikal jika diperlukan. Menghilangkan tanda bullet pada daftar dan menambahkan efek hover.

Main

• Memberikan margin kiri untuk ruang sidebar, padding, dan menggunakan flexbox untuk tata letak konten.

Footer

• Mengatur footer dengan latar belakang gelap, teks putih, teks rata tengah, dan padding. Menghilangkan margin untuk teks di dalam footer.

Kesimpulan

Kode CSS ini mengatur gaya dasar dan tata letak halaman web dengan header, sidebar, dan konten utama yang responsif serta footer. Setiap bagian memiliki warna, padding, margin, dan efek transisi untuk tampilan yang konsisten dan menarik.

Sekian aja cerita pengalaman hari ketigabelas PKL dari saya. Mohon maaf apabila ada pengetikkan yang kurang berkenan di hati karena kadang tangan ini khilaf dan terpeleset karena licinnya keyboard yang digunakan. Terima kasih telah membaca.

Wassalamualaikum wr wb