Skip to content

This is a Tastefood Restaurant Website created for the ITS Web Programming course. This website was created with the PWA concept using Service Worker, Promise, Materialize Framework, PHP Version 7.3, MySQL, and ES6 standard Javascript:

License

Notifications You must be signed in to change notification settings

BryanYehuda/WebsiteTastefoodPWA

Repository files navigation

Website Tastefood PWA

English

This is a Tastefood Restaurant Website created for the ITS Web Programming course

  • All Programming is done in Brackets and Visual Studio Code, a special Website code editor that has a Live Preview feature
  • This website is hosted at the web address Tastefood Restaurant.
  • This website has been validated by W3C CSS Validator
    CSS Validator Badge CSS Validator Badge
  • This website has been validated by the W3C HTML Validator
    HTML Validator Badge HTML Validator Badge

You can see the website in action at my Instagram Reel

This website was created with the PWA concept using Service Worker, Promise, Materialize Framework, PHP Version 7.3, MySQL, and ES6 standard Javascript:

The website that I have created currently has fulfilled:

  • Displays 9 pages, by displaying image files with food themes with MPA function. (fulfilled)
  • Displays a slightly different list of page links in Navbar for PC and sidebar for Mobile to meet the Responsive concept in Navbar (Fulfilled)
  • Applying responsive concepts for every content on the Website using the Materialize Framework and Media Queries. (fulfilled)
  • Implemented the add to homescreen feature, by including icons and splash screens using PWA. (fulfilled)
  • Can be accessed in offline mode without any assets and content being broken since the first access using Service Worker caching. (fulfilled)
  • Have a list made to provide a way to order a menu at a Tastefood Restaurant. (fulfilled)
  • Has a hyperactive link when hovered, this link will connect the Tastefood Restaurant Website with the Github Repository. (fulfilled)
  • Have a LOGIN Page and an account REGISTER that are useful so that users who want to access this website can get their respective sessions. (fulfilled)
  • Every time a User LOGIN or REGISTER, their password has been hashed to increase the security of the website. (fulfilled)
  • Has a page that can CREATE, READ, and DELETE into the database to place orders at Tastefood Restaurants. (fulfilled)
  • Has a page that can READ from the database and display it in the form of a table for a list of any food ordered. (fulfilled)
  • Have a page that can SUBMIT and FORM ACTION into the database. (fulfilled)

Some of the features that will soon be added to this website are:

  • All features requested by the ITS Web Programming Course have been added

This website also has the following awards:

  • HTML Rookie Leader (from Web Programming Course)
  • HTML Rookie 100 (from Web Programming Course)
  • CSS Rookie 100 (from Web Programming Course)
  • JS Rookie Leader (from Web Programming Course)
  • JS Rookie 100 (from Web Programming Course)

License

This Repository has MIT License.
This license allows the user to make any changes to the program code. This license only requires the user to include the license and author's copyright in the redistributed code and there is no prohibition against using the trademark of the original author. In addition, the user also has no right to sue the manufacturer when there is damage to the software

Bahasa

Ini adalah Website Restoran Tastefood yang dibuat untuk mata kuliah Pemrograman Web ITS

  • Semua Pemrograman dilakukan di Brackets dan Visual Studio Code, code editor khusus Website yang memiliki fitur Live Preview
  • Website ini dihosting di alamat web Tastefood Restaurant.
  • Website ini sudah divalidasi oleh W3C CSS Validator
    CSS Validator Badge CSS Validator Badge
  • Website ini sudah divalidasi oleh W3C HTML Validator
    HTML Validator Badge HTML Validator Badge

Hasil pengerjaan dari website bisa dilihat pada Instagram Reel

Website ini dibuat dengan konsep PWA menggunakan Service Worker, Promise, Framework Materialize, PHP Versi 7.3, MySQL, dan Javascript standar ES6:

Adapun website yang saya buat saat ini sudah memenuhi:

  • Menampilkan 9 halaman, dengan menampilkan file gambar dengan tema makanan dengan fungsi MPA. (Terpenuhi)
  • Menampilkan daftar tautan halaman di Navbar untuk PC dan sidebar untuk Mobile yang sedikit berbeda untuk memenuhi konsep Responsive dalam Navbar (Terpenuhi)
  • Menerapkan konsep responsive untuk setiap konten yang ada di Website menggunakan Framework Materialize dan Media Queries. (Terpenuhi)
  • Menerapkan fitur add to homescreen, dengan menyertakan ikon dan splash screen menggunakan PWA. (Terpenuhi)
  • Dapat diakses dalam mode offline tanpa ada satupun aset dan konten yang broken sejak akses pertama menggunakan caching Service Worker. (Terpenuhi)
  • Memiliki list yang dibuat untuk memberikan cara melakukan order sebuah menu di Restoran Tastefood. (Terpenuhi)
  • Memiliki Link yang hiperaktif ketika dilakukan hover, link ini akan menghubungkan Website Restoran Tastefood dengan Github Repository. (Terpenuhi)
  • Memiliki Page LOGIN dan REGISTER akun yang berguna agar user yang ingin mengakses website ini bisa mendapatkan session mereka masing-masing. (Terpenuhi)
  • Setiap kali User melakukan LOGIN atau REGISTER, password mereka sudah dilakukan hashing untuk menambah keamanan website. (Terpenuhi)
  • Memiliki sebuah page yang dapat melakukan CREATE, READ, dan DELETE ke dalam database untuk melakukan order di Restoran Tastefood. (Terpenuhi)
  • Memiliki sebuah page yang dapat melakukan READ dari database dan menampilkannya dalam bentuk table untuk list makanan apa saja yang dipesan. (Terpenuhi)
  • Memiliki sebuah page yang dapat melakukan SUBMIT dan FORM ACTION ke dalam database. (Terpenuhi)

Adapun beberapa fitur yang akan segera ditambahkan ke dalam Website ini adalah:

  • Semua fitur yang diminta oleh Mata Kuliah Pemrograman Web ITS sudah ditambahkan

Website ini juga sudah memiliki penghargaan:

  • HTML Rookie Leader (dari Mata Kuliah Pemrograman Web)
  • HTML Rookie 100 (dari Mata Kuliah Pemrograman Web)
  • CSS Rookie 100 (dari Mata Kuliah Pemrograman Web)
  • JS Rookie Leader (dari Mata Kuliah Pemrograman Web)
  • JS Rookie 100 (dari Mata Kuliah Pemrograman Web)

Log Harian Update dan Commit Website Tastefood:

  1. Hari Pertama (20 Oktober 2020) :
  • Mempelajari Framework Materialize CSS dan Materialize JS
  • Mempelajari cara menerapkan Service Worker ke dalam sebuah Website
  • Mempelajari cara menerapkan Promise ke dalam sebuah Website
  • Mempelajari cara menerapkan Caching Dinamis ke dalam sebuah Website
  1. Hari Kedua (22 Oktober 2020):
  • Melakukan inisiliasi Repository Github
  • Melakukan Instalasi Framework Materialize CSS dan Materialize JS
  • Melakukan download Starter Template Materialize
  1. Hari Ketiga (25 Oktober 2020):
  • Melakukan Perubahan Layout dari Starter Template Materialize yang awalnya SPA (single Page) menjadi MPA (multi page)
  • Menggunakan pengaturan script dari nav.js dan nav.html agar bisa mengubah dari SPA menjadi MPA
  • Menggunakan init.js untuk menginisialisasi sidebar dan navbar secara responsif
  1. Hari Keempat (31 Oktober 2020):
  • Pembuatan Landing Pages untuk Home.html , Menu.html , Location.html , dan Contact.html untuk memenuhi konsep MPA
  • Melakukan perubahan layout untuk pembuatan website Restoran Tastefood
  1. Hari Kelima (7 November 2020):
  • Pembuatan logo Restoran Tastefood
  • Pencarian Color Pallete yang sesuai untuk sebuah Restoran
  • Pencarian grafik dan images dari menu, lokasi, dan koki
  • Pencarian icon dari Materialize untuk kontak Website
  • Pembuatan Favicon untuk logo Website
  • Memasukkan grafik yang sudah didapatkan ke dalam Website
  • Memasukkan Color Pallete yang sudah didapatkan ke dalam Website
  1. Hari Keenam (13 November 2020):
  • Pembuatan Media Query untuk mengatur Responsif di PC ataupun mobile untuk membantu grid layout yang disediakan Materialize CSS lebih indah lagi
  • Testing Live Preview dari Website sebelum lanjut ke tahap berikutnya
  1. Hari Ketujuh (15-16 November 2020):
  • Pembuatan Service Worker dan penerapan Chain Promise ke dalam Website
  • Melakukan Caching semua asset website ke dalam Service Worker tetap bisa digunakan dalam keadaan offline
  • Pembuatan Script.js untuk melakukan register Service Worker
  1. Hari Kedelapan (17 November 2020):
  • Pembuatan Manifest.json untuk memberikan identitas ke dalam Website Tastefood
  • Pembuatan logo Restoran Tastefood dalam berbagai macam ukuran untuk memenuhi SEO Google dengan preview yang Any Maskable
  • Testing terakhir Front End dari Website Tastefood
    Semua Testing Front End berhasil baik dalam mode online ataupun offline dan tidak ada error di console
  1. Hari Kesembilan (18 November 2020):
  • Update ke dalam Repository
  1. Hari Kesepuluh (21 Desember 2020):
  • Menambahkan Form Login User, agar user dapat melakukan login
  • Menambahkan Form Register User, agar user dapat melakukan register user
  • Menambahkan Form Order, agar user dapat melakukan pemesanan makanan ke dalam restoran Tastefood
  1. Hari Kesebelas (2 Januari 2021):
  • Melakukan perubahan bentuk Website yang awalnya MPA menjadi SPA agar bisa lebih sesuai dengan keperluan website
  1. Hari Keduabelas (4 Januari 2021):
  • Menambahkan User Session dengan fungsi Login dan Logout
  • Login dengan password sudah menggunakan fungsi Hashing untuk tambahan keamanan
  1. Hari Ketigabelas (4 Januari 2021):
  • Menambahkan fungsi Register User, agar user dapat membuat akunnya sendiri untuk login ke Tastefood
  • Register dengan password sudah menggunakan fungsi Hashing untuk tambahan keamanan
  1. Hari Keempatbelas (4 Januari 2021):
  • Melakukan minor fix terhadap bug dan testing terhadap user session dan fitur LOGIN, LOGOUT, dan REGISTER
    Semua Testing User Session berhasil baik dalam mode online ataupun offline dan tidak ada error di console
  1. Hari Kelimabelas (5 Januari 2021):
  • Menambahkan fungsi Create Order, agar user bisa menambahkan order
  • Menambahkan fungsi Read Order, agar table di form Order dapat membaca order apa saja yang sudah masuk
  • Menambahkan fungsi Delete Order, agar user dapat menghapus order
  1. Hari Keenambelas (6 Januari 2021):
  • Melakukan minor fix terhadap bug dan testing terhadap CRD yang ada di dalam Website
  • Melakukan hosting terhadap Website Tastefood di alamat web tastefood.my.id
  • Melakukan update terhadap diary / laporan progress website
    Semua Testing CRD berhasil baik dalam mode online ataupun offline dan tidak ada error di console

Lisensi

Repository ini memiliki Lisensi MIT.
Lisensi ini membolehkan pengguna untuk melakukan perubahan apapun pada kode program. Lisensi ini hanya mewajibkan pengguna untuk menyertakan lisensi dan copyright pembuat pada kode yang didistribusikan ulang dan tidak ada larangan untuk menggunakan trademark dari pembuat asli. Selain itu pengguna juga tidak berhak untuk menuntut pembuat ketika terjadi kerusakan pada perangkat lunak tersebut.

About

This is a Tastefood Restaurant Website created for the ITS Web Programming course. This website was created with the PWA concept using Service Worker, Promise, Materialize Framework, PHP Version 7.3, MySQL, and ES6 standard Javascript:

Topics

Resources

License

Stars

Watchers

Forks

Packages