 Transi? Ya, Transi. Okey, jadi... Just some general housekeeping. No food and flavored drinks in the electrical theater. Ya, so don't eat your food here. And the wifi SSID is Ninja. And the password is Password. Okay? And just in case you all didn't have for the previous session. My name is Huayran. You can contact me on Twitter at Wu Huayran or through my email, hello at Wu Huayran.me. So I'm an open source advocate. And I'm also a student of Nian Poly. Then we have a few helpers today. So we have Jun Tak, who is down here. Trying to do the audio stuff. And we have Ivan, which is over there. We have Jin Hao, who is coming later. And we have Justin Lee, who is the co-founder of Hacker Space and the XIVM staff. Ya, he has more than 10 years of experience in programming. Ya, so these are some of the helpers you can look for when you raise your hand. So let's do a very quick recap. We covered on the document declaration, the web, how open standards work in general and the web itself. And some CSS, how CSS selectors work at all. So let's have a very fun quiz right now. And let's play CarHood. So if you visit CarHood.it go to CarHood.it and you will show a code right now. Ya. So if you... Top 3 will get a free Microsoft t-shirt. I guess, ya. So if you get a top 3, you will get a t-shirt from Microsoft. So very quick recap. So ready to join, blah, blah, blah, start. Come on. Okay, so this is a game code. If you visit CarHood.it enter this game pin. Everybody okay? So CarHood.it Okay, so we got 1 player in. Okay, so we got 15 player so far. So you all remember your HTML and CSS stuff, right? Yes, no, maybe. Awkward silence. Okay. Have what? Password. 2 variable connected already. Sorry. I don't know maybe. Just now you're an internet, right? No reason to use internet just like that. No, it's like everyone just come in. After come in, connect. Okay, so... We just restarted around 3. I guess. We just restarted around 3. I guess. And we'll wait a while. It's so much weekend. Rough to wait. Okay. Oh, it's on already. We have to wait. We are sorry we just restarted around 3. Is it connected? Router or looter? Or putter or what? It refuses to start up. But that's how it is. It's not starting yet. Okay, now it's starting. No, it's starting already. Oh, just think Bob Long. Don't look at it. So... Have you all heard of Murphy's Law before? Anyone heard of Murphy's Law? No one? Okay, so... Just an interesting fact about Murphy's Law is... Murphy's Law is when one thing starts to go wrong, everything will start to go wrong. So in this case right now, we are kind of experiencing what we call the Murphy's Law. So in data centres, when Murphy's Law occurs, so it starts off with maybe just this error or something and then the entire server dies out and then the entire reg dies out and the entire data centre dies out. That's what happens in a large-scale scenario of Murphy's Law. Alright, so... But this thing is just not starting up. Is it on or off? It's on. No, it's off. It's on. Okay, try connecting to the internet now. It's okay already. Sorry. Kenapa kamu tidak mempunyai? Mereka mempunyai kontainan. Kenapa kamu mempunyai kontainan? Kenapa kamu mempunyai kontainan? Kenapa kamu mempunyai kontainan? Jadi semua orang akan ke internet. Internet, internet. Ya, lawpan. Boleh saya membantu lawpan? Bukan internet. Ini Ninja 2.4. Ya, saya tahu. Ini yang lain. Internet? Ia masih camera... Saya ingat ada perkara lain. Kenapa? Itu saya ingat... Tiada pengalaman. Kenapa yang ada pengalaman itu? Ya, spray... Itu kenapa saya tidak menggunakan pengalaman ini? Itu kenapa saya tidak menggunakan pengalaman ini? Kita tidak ada causa perkahwinan. Kita hanya menggunakan pengalaman ini. Kita hanya menggunakan pengalaman ini. Ia sepatutnya NAT-out. Ia masih belum ada internet. Okey, okey. Okey. Pilih pringkat lantai dan offshore Jangan lantai pringkat lantai, sehingga pringkat lantai pringkat lantai Jangan lantai pringkat lantai Baiklah. Semua orang sudah berhubung ke Kahu. Semua orang sudah berhubung ke Kahu. Berhubung jika anda belum berhubung ke Kahu. Maaf? Ya. Ia berhubung. Baiklah. Ia sepatutnya. Semua orang sudah berhubung ke Kahu. Baiklah. Baiklah. Apa? Apa yang berlaku? Bukan. Baiklah. Baiklah. Baiklah. Baiklah. Baiklah. Baiklah. Tidak mengapa. Baiklah, semua ada? Baiklah, mari kita tunggu sekejap lagi. Baiklah, mari kita mulakan quiz. Ya! Jadi, ada 11 pertanyaan di deskripsi. Kamu hanya perlu memilih panggilan. Baiklah, ini pertanyaan pertama. Ia penting untuk pembangunan untuk... ...tidak menghubungi, memperkenalkan, membuatkan duit untuk pembangunan yang mungkin. Perkenalkan kompleks. Jadi, pertanyaan yang sangat basic. Baiklah, jadi... 13 orang kamu dapatnya betul. Jadi mari kita lihat siapa yang sekarang di atas. Alex yang sekarang diberitahu di dalam ini. Pertanyaannya, sebelum internet, USA telah mempunyai projek intronet, WIR Network, ARPANET, BGP. Baiklah, mari kita lihat. Baiklah, bukan itu. 10 orang dapatnya, betul? Jadi, ARPANET adalah projek... ...yang USA ada sebelum internet. ARPANET adalah projek intronet. Tetapi projek nama bukan intronet. Jadi projek nama adalah ARPANET. Jadi, mana yang menjadikan... ...berbicara tentang web wawah, itu tidak benar. I can run IPv6, ia sepatutnya segar. I can open an accessible. I can open standard set by IEEE. Jadi, mana yang tidak benar. Ini tanya sangat kencang. Okey, jadi... ...nama 5 itu tidak benar. I can open standard set by internet engineering task force, IETF dan bukan IEEE. IEEE adalah... ...sebenarnya, ia adalah organisasi yang berbeda. IETF adalah yang menjadikan... ...standart untuk internet. Jadi, mari kita lihat siapa yang dapatnya. Alex masih berbicara sekarang. So, tanya nama 4. Apa yang HTML yang menjadikan? Dan 4. Hypo-textual, banyak bahan-bahan. Hypo-textual, maka bahan-bahan. Hypo-textual, maka bahan-bahan. Sangat sedap. Okey, jadi... Jadi, terutamanya anda dapatnya, kan? Jadi... Well, Eric. Eric sekarang dulu. Jadi, kenapa HTML bukan bahan-bahan? Baiklah. Ia bahan-bahan, bahan-bahan dekoratif... ...tidak mengalami, ia mengalami. Jadi, anda dapat 4... ...4 soalan di sini. Saya bermakna 4 soalan, maaf. Jadi, soalan itu bukan bahan-bahan. Dengan salah satu anda... Okey, jadi... Soalan itu... Kenapa bukan bahan-bahan? Dan... ...apa soalan bahan-bahan HTML? Jadi, kenapa bukan bahan-bahan? Kenapa bukan bahan-bahan? Jadi, bukan bahan-bahan. Alan Turing yang keluar dengan soalan tering... ...tering masin dengan soalan tering. Jadi, jika bahan-bahan tidak tering... ...bukan bahan-bahan programing. Jadi, apa yang terjadi? Soalan tering adalah apabila anda mempunyai masin tering... ...pada perusahaan infanat... ...seharusnya dapat menerima... ...sebaik-baik yang berjaya pada perusahaan infanat... ...sebelum ini. Jadi, jika masin tering... ...bisa dapat buat begitu, ia tering... ...perusahaan. Okey. Jadi, Mark sedang menerima... ...apa yang terjadi pada perusahaan infanat HTML5? Baiklah. Perusahaan infanat HTML... ...HTML... ...HTML... ...HATER. Jadi, terutamanya kita dapatkan. Jadi, ini adalah perusahaan infanat... ...untuk menerima... ...perusahaan infanat HTML... ...yang menerima... ...perusahaan infanat HTML5. Okey. Jadi, Mark sedang menerima... ...perusahaan no. 7. Bagaimana cara menerima... ...buu perusahaan infanat tidak perlukan kondisi? Jadi... ...HTML, HR, BR, DF. Jadi, kita dapat dua jawapan. Dan kebanyakan anda dapatkan. Jadi, HR dan BR... ...tidak perlukan kondisi... ...dan ia adalah perusahaan infanat sendiri. Jadi, anda ada beberapa jenis kondisi... ...yang... ...banyak mereka perlu diperlukan... ...sukit... ...yang ada beberapa yang diperlukan... ...sebelum HR dan BR... ...yang tidak perlu... Closing Tag dan Self Closing. Mark tetap tetap dikembangkan. Jangan lupa bahawa top 3 akan mendapat t-shirt dari kita nanti. Pertanyaan nombor 8. Apa ialah atribut HDML? Element Modifier, Element Descriptor, Element Grouping, Decorator Element. Pertanyaan nombor 1 adalah Element Modifier. HDML atribut sepatutnya dapat mendapat t-shirt. Pertanyaan nombor 1 akan mendapat t-shirt. Pertanyaan nombor 1 akan mendapat t-shirt. Pertanyaan nombor 2 akan mendapat t-shirt. Pertanyaan nombor 3 akan mendapat t-shirt. Apa atribut boleh digunakan untuk t-shirt di Groups?ойh ID Class CSS.persona hujah menaneh Apa-apa hal yang CSS membutuhkan, yang telah dikatakan dalam kelas CSS, okey? Jadi, kelas CSS adalah tidak. Meskipun kelas CSS adalah kelas CSS, di dalam HTML. Jadi, pertanyaan terakhir. Pertanyaan terakhir. Bagaimana kelas CSS? Tidak, tidak. Ini bukan pertanyaan terakhir lagi. Jadi, pertanyaan terakhir. Kita mulakan untuk menjadi kelas CSS. Kelas CSS, kelas CSS, kelas CSS, kelas CSS, kelas CSS. Jadi, jawabannya adalah kelas CSS. Okey, tidak kelas CSS. Kerana kelas CSS hanya mengalinkan kelas CSS dan tidak kelas CSS. Jadi, kelas CSS untuk mengalinkan kelas CSS. Ia perlu dikelas kelas CSS. Anda juga boleh menggunakan perkara seperti kelas CSS, yang kita tidak akan menutupi, tetapi anda boleh menutupi kelas CSS. Jadi, anda menggunakan kelas CSS untuk mengetahui kelas CSS. Seperti kelas CSS. Jadi, pertanyaan terakhir. Kita masih memiliki kelas CSS dan kelas CSS. Sekarang dalam kelas CSS. Apa yang harus dibuat untuk memilih kelas CSS dengan ID? Kelas CSS, kelas CSS, kelas CSS, kelas CSS, kelas CSS, kelas CSS, kelas CSS, kelas CSS, kelas CSS. Jadi, kelas CSS, kelas CSS. Wow! Kelas CSS, anda dapatnya, kan? Kelas CSS kelas CSS adalah apabila kelas CSS di depan semuanya. Kelas CSS kelas CSS adalah apabila kelas CSS di depan semuanya. Kemudian anda mempunyai kelas CSS yang akan digunakan untuk kelas CSS. Apabila kelas CSS tidak ada kelas CSS atau kelas CSS, ia akan menjadi kelas CSS yang biasa. Jadi, ia boleh menjadi kelas HDM dan sebagainya. Baiklah, mari kita lihat siapa yang menang kita. Jadi, kita ada... Helo? Siapa Helo? Okey, so, Helo? Helo? Helo? Helo? Okey, hai. Si si. Okey, haha. Jadi, tiga orang anda dapat... Tiga-tiga, T-shirt Microsoft. Kita akan beri... Kita akan beri kepada anda nanti. Tapi, banyak anda melakukannya dengan baik, saya rasa. Kerana... perkara seperti... ...itu sangat baik. Ya, jadi... Ya, itu adalah sebuah kelas yang kita belajar dengan terakhir. Semua orang anda di sini untuk pertama kali. Untuk tangan. Di sini untuk pertama kali. Okey. Okey. Sebenarnya, Helo melakukannya dengan baik-baik saja. Walaupun ia pertama kali. Okey, jadi... Jadi, mari kita... ...mencari kelas terakhir. Apa yang kita lakukan terakhir, hanya untuk... ...bantu orang yang tak datang kelas terakhir. Yang tak dapat membuat kelas terakhir. Jadi, terakhir, kita pergi ke kelas HDM. Jadi, kita ada... ...kelas ini yang anda boleh berikannya daripada... ...apa yang mempunyai kelas terakhir untuk kelas ini. Okey, jadi... Saya hanya akan membuat kelas terakhir. Saya hanya akan membuat kelas terakhir. Kemudian, anda hanya akan mempunyai kelas ini. Adakah anda menerima saya? Okey, jadi... ...ini adalah kelas terakhir, saya rasa. Boleh anda melihat? Tidak, anda tak boleh. Baiklah. Baiklah, saya tak boleh melihat kelas ini. Okey, saya hanya akan membuat kelas terakhir. Boleh anda melihat kelas ini? Tidak. Boleh anda melihat kelas terakhir? Jadi, untuk kelas terakhir, saya akan membuat kelas terakhir. Bagaimana anda boleh menikmati dokumen ini? Ini adalah tempat yang kita tinggalkan dari... ...kelas terakhir. Kita menggunakan perkara ini di mana-mana. Ia adalah perkara seperti Cloud9, tapi... ...tidak begitu bagus seperti Cloud9. Jadi, kelas terakhir. anda boleh menikmati dokumen itu. Jangan ingat menikmati dokumen github... ...sebenarnya. Jadi, apabila anda menikmati... ...kelas terakhir... ...saya akan membuat kelas terakhir. Anda akan mempunyai... ...kelas terakhir. Okey, saya rasa... ...saya tidak mahu saya lalui semuanya lagi. Saya bermaksud... ...saya tidak mahu menikmati dokumen. Semua orang membuat kelas terakhir. Semua orang membuat kelas terakhir. Saya rasa kelas terakhir... ...sebenarnya. Okey. Okey, saya akan menikmati... ...awak... ...segera... ...di kelas terakhir. dan membuat kelas terakhir... ...untuk kelas terakhir. Semua orang membuat kelas terakhir. Okey. Jadi... ...awak membuat kelas terakhir... ...di kelas terakhir... ...di kelas terakhir. Anda akan baik-baik untuk pergi. Anda hanya perlu membuat kelas terakhir... ...dari dokumen ini. Jangan risau. Semua kelas terakhir... ...dengan kelas terakhir... ...dan mengeluarkan kelas terakhir. Dan... ...awak boleh bermaksud video lagi. Jika anda mengeluarkan kelas terakhir... ...atau kelas terakhir... ...atau anda akan mengeluarkan kelas terakhir... ...dari dokumen ini. Jadi anda boleh selalu pergi ke... ...enginia.sg untuk mengeluarkan kelas terakhir. Okey. Okey. Jadi... ...saya cuba... ...berubah kelas terakhir. Saya akan membeli kelas terakhir sedikit... ...untuk... ...26, saya rasa. Bagus itu. Boleh anda melihat kelas terakhir? Bukan anda dapat melihat kelas terakhir, bukan? Adakah ia besar? Jika anda tidak dapat melihat kelas terakhir... ...saya berharap anda perlu bergerak... ...sebab ada banyak kelas terakhir di depan. Saya melihat banyak kelas terakhir di depan. Saya cuba bercakap dengan orang. Ya. Orang tahu bagaimana bercakap. Jadi cuba bercakap dengan mereka. Atau beritahu seseorang... ...saya boleh membantu seseorang lain... ...membuat beberapa... ...pengalaman kelas terakhir juga. Jadi... Pastikan ada seseorang di depan anda. Jadi... ...saya bercakap dengan... ...berapa anda akan melihat... ...konfigurasi kelas terakhir? Anda menghidupkan kelas terakhir di sini. Dan anda menghidupkan... ...kelas terakhir ini disebut info. Apabila anda menghidupkan info, anda akan membuka kelas terakhir ini. Ketika anda melihat kelas terakhir, anda akan melihat kelas terakhir di sini. Apabila anda menghidupkan kelas terakhir, anda akan membuka kelas terakhir di sini... ...yang akan membuka kelas terakhir. Jadi ia sesuatu seperti itu. Saya tidak fikir saya ada internet. Saya memang ada internet. Okey. Jadi semua orang sepatutnya... ...ada sesuatu seperti itu, saya rasa. Sebenarnya anda sepatutnya... ...ada seseorang seperti itu, saya rasa. Ya. Anda sepatutnya mempunyai sesuatu... ...yang mempunyai sesuatu seperti itu... ...dengan kelas terakhir di sini. Kata, selamat datang kelas terakhir di sini. Kita menghidupkan beberapa item di sini. Dan apabila anda menghidupkan kelas terakhir di sini... ...dengan kelas terakhir di sini. Okey. Jadi ini... Ketika anda tidak tahu, ini Olivia Benson... ...yang adalah salah satu kelas terakhir di sini. Baiklah. Okey. Saya akan meletakkan kelas terakhir. Ini akan mengambil kelas terakhir. Okey. Kita dah melakukan sebuah kelas terakhir... ...dan kita akan mengembar beberapa tempat yang di astetik ... ...di CSN sendiri. Jadi... ...kita telah melakukan aplikasi kita. Sebelum itu, tidak nampak terlalu baik. Kita akan mengubah di atas astetik kita. Kita akan mengambil sedikit tentang kelas terakhir di sini... ...tapi tidak terlalu baik. Jadi kita akan mengembar sedikit lebih banyak... sedikit lagi di sisi di dalam, panggilan dan warna dan segala-galanya. Jadi anda ada apa yang kita nampak, warna material Google. Ini adalah warna yang dikatakan oleh Google. Dan ia disebut material. Yang ini disebut material. Ada URL di sini yang anda boleh pergi ke. Untuk memilih warna material Google. Okey. Semoga baik. Dan kita juga ada apa yang kita nampak Google Forms. Yang adalah panggilan panggilan yang digunakan online. Jadi jika anda pergi ke panggilan ini, anda akan dapat melihat... banyak-banyak panggilan panggilan yang digunakan untuk anda menanam dan... termasuk panggilan CSS anda sendiri. Jadi sekarang kita akan memperkenalkan dua perkara. Panggilan Google Colors dan Google Forms ke dalam panggilan. Untuk membuat panggilan ini lebih baik. Jadi tidak cukup baik. Jadi kita akan memperkenalkan. Sekarang kita akan memperkenalkan panggilan CSS untuk memperkenalkan... panggilan OpenSense dan Roboto... ke dalam panggilan kita... ke dalam panggilan kita. Jadi memperkenalkan panggilan CSS anda... dan memperkenalkan perkara ini di atas panggilan. Memperkenalkan panggilan. Ini bukan panggilan baru. Ini hanya panggilan yang tidak ada di sini. Kemudian ia akan seperti itu. Memperkenalkan panggilan OpenSense dan Roboto. Selepas panggilan... kita akan membuat panggilan panggilan... dengan panggilan 2.1.2.1.2.1. Jadi ini adalah panggilan dark. Kita akan memperkenalkan panggilan Forms ke dalam panggilan OpenSense... dan memperkenalkan panggilan CSS... jika tidak ada panggilan OpenSense. Selepas panggilan OpenSense tidak memperkenalkan panggilan. Selepas panggilan document... dan jika ia memperkenalkan panggilan OpenSense... ia akan memperkenalkan panggilan CSS... yang adalah panggilan yang terdapat... pada panggilan panggilan sekarang. Kemudian kita mempunyai H1, H2, H3, H4. Kita akan memperkenalkan panggilan panggilan Roboto... dan memperkenalkan panggilan CSS... jika Roboto tidak memperkenalkan panggilan. Jadi ini adalah panggilan yang sangat mudah. Saya akan memperkenalkan panggilan CSS untuk menggabungkan... panggilan yang baru dan baru daripada panggilan Google... dan panggilan Google. Jadi... saya akan cepat memperkenalkan panggilan ini... panggilan ini... dan saya akan memperkenalkan... memperkenalkan panggilan CSS saya di sini. Jadi saya memperkenalkan panggilan CSS saya di sini. Dan saya memperkenalkan panggilan saya di sini. Jadi saya akan memperkenalkan panggilan ini... dan memperkenalkan panggilan ini. Boleh semua orang melihat panggilan ini? Dan ingat untuk menyelamatkan panggilan anda... dan ingat bahawa semua panggilan ini adalah K-sensitif... dalam... Oh, ini... Bagus. Okey. Jadi semua orang dapat melihat panggilan ini. Saya bermaksud... apa-apa pun ia memperkenalkan panggilan ini. Baiklah. Saya akan memperkenalkan juga... hanya untuk membantu anda. Ingat untuk membantu anda jika anda memperkenalkan panggilan ini. Ya, okey. Saya akan memperkenalkan... apa panggilan ini. Jadi, saya akan memperkenalkan panggilan ini. Saya akan memperkenalkan panggilan ini. Tapi saya akan memperkenalkan panggilan ini. Saya dapat lakukannya semasa ... Bukan saya memperkenalkan panggilan ini, semua orang mengetahui... So you just right click this container, this container thing which is like bad, right click destroy it and recreate everything. So I usually use cloud line and it's better than this. This is really annoying. But you can't complain because it's free. So no complaints. So we just create everything. We have to quote and everything. So no worries. Again, search for a stack PHP. Look for this thing called the PHP sendOS 6.5. SendOS 6.5. This is below the unit 2.14. So you can see this thing sendOS 6.5. PHP with Apache, MySQL, PHP Miami, Composer etc. So click onto that one, then type in whatever you want name it. And then recreate. This should fix the problem. I hope. So that's what you do when that thing annoys you. You recreate everything. Yes, you recreate everything. So it's going to take some time to deploy the container. If any of you have not deployed, just do what I just did. So you all should be fine afterwards. Deploying, deploying, deploying. If any of you having issues, try raise up your hand. And we'll be there. So we are currently setting up the food. The food is here but we are still setting it up. Just raise up your hand if you have any issues. So now I'm going to go through the entire process of doing up the files and all. So just follow through if you have not done it before. So right here we have the container. So this thing here with the triple, with three bars over here, which looks like a barcode, is what we call a container. So right click. So right click this thing and create file index.html. It's case sensitive. So everything in lower case index.html. So create a file. Then we go to this thing that we previously had and we copy it. And then paste it all in. Then save. Control S to save. Afterwards, we're going to create a new file, a new folder, sorry, named assets. Lower case as well. Assets in lower case. New folder, assets. And inside assets, I'm going to right click, create new folder, CSS. Okay? This thing just trapped all of me. Okay, so finally it's not even creating my folder. Okay, so now that we have this folder called CSS, we're going to right click and we're going to create a new file named style.css. Style.css in lower case. Okay? So go back to this ninja coding thing here. Scroll down. You see this thing here? Copy everything. Right? Just copy this. And then paste it in. Okay? And then we're going to modify your file. Okay, actually, I just modify it now. Let me just modify the entire document for you all. So we're going to import in the forms. Are you cheating me? Okay, so yeah, just modify this file. And then import the forms and everything. Everyone all good? All got to index.html, created your style of CSS. Yeah? Okay, so after you've done the importing, and then you have created your forms and everything, go to this here and refresh. You should get something that looks slightly better with better-looking forms and a better-looking background color with a better-looking color for your form. Right? So you can see that the gigantic forms here are using Roboto, while the rest are using OpenSense form. This is because of what we have declared here. For the body form, which are our typical forms, we've declared the form tab as we've imported OpenSense and Roboto, but we're using Roboto for the big H1, H2, H3, H4. And as for the form friendly, we're going to use OpenSense and we will send it with a fallback to send array. Right? So I'll raise up my hand if you all have any problems. Okay, so I'll notice I just written really bad code. Okay. I'll change it. Look at that evil lah from Justin. He's laughing at my incompetency. Okay, so I was missing some the HDML tag, which is something that is quite important. Actually, it's one of the most basic important thing, which I didn't include. So I'm going to add that back in. Okay, so now your HDML is a valid document after adding in the HDML tag. Sorry, everyone, okay? Sorry. Okay, so the... Did you get a URL just now? Okay, so the URL is... This is the URL. That's the URL for those who need the document. Okay, and then you can launch your codes and everything. Okay, so now that we've imported the forms and everything, and colors and everything. Right, so we're going to go move on a little bit to the next step. Let's bring out our website. It looks slightly better now with normal-looking forms. So let me introduce to you what we call the POSFIX pseudo-classes. So remember the prefix things and so we also got what we call POSFIX. POSFIX is before and POSFIX is after. POSFIX pseudo-classes are things that are applied after a particular selector that is imaginary. It's pseudo. Sudo means imaginary, something non-existent. But it's there. So let me go through what is POSFIX pseudo-classes. So if you see carefully that you have this colon over here. Do you see this colon here? POSFIX A is POSFIX with a colon hover. And you also got you also got this thing the after pseudo-class. So both of these are pseudo-classes that don't exist. So what happen when I do when I add this colon. So let's take a look at what have anything that can show a URL or something. So let me just complete and add some to modify the exotic cat a bit. I think it's okay. So I added anker link to this cat over your exotic short-haired cat. So you see that when I add anker link that is blue and highline underline and when I put it right there's actually a URL it will lead me somewhere else. So it will lead me to products.html and it's not existing currently. So I've added anker link here. Y'all can add it in as well over here. Add anker link. So let me demonstrate to you the effect of pseudo-classes. So let's add a hover effect. So when I refresh I should get the same thing. But when I hover, do you see the color change? So when I hover over there's this imaginary hover thing that will be will be inside this particular element. So when I when I have the pseudo-class of a hover it will be applied to the particular pseudo-class. I mean, yeah post-fix pseudo-class. So you can see that there's been applied here. So previously some of us have some issues with text below the two blocks. So let's take a look at the two blocks we have. So we've got the left block, right block and then what if I add a paragraph here and say, let's say, learn mal. Learn mal. I add a paragraph here and say learn mal. So what you notice is that the the mal is a bit annoying. So okay, let me import the image first. Let me find a let me plagiarise an image first. So I really like this catalog first and it looks very cute. I guess. So I'm just going to save the image and then upload it. So I'm going to create a new folder called img which stands for image and I'm going to upload Olivia Benson. Quick upload and I'll drag Olivia Benson in and Olivia Benson will get uploaded. And I'm going to rename this to Olivia Benson. Okay, so so Right now you see that the mal is down here. It's supposed to be below it by right because it's outside of the block. It's outside of both of the blocks. It's supposed to be it's supposed to be down here but right now it's peering here. That's a clear issue we have. So it's clearly outside of this block manager. So you apply a pseudo class to this block manager to fix this problem. So let me show you very quickly. Now I'm going to edit the style and I'm going to edit this clear both here and have a clear both inside the after class. What will happen next is you'll see that you'll put up a copy of this. So in case you can make a before and after effect comparison Are you kidding me? Okay, so now you see that the mal is below which is what we wanted for long. Do you all see the before and after effect? So let me show you. Did you see? Pretty obvious, right? So ya as captain of this phase So this is an after class which is something that this is a pseudo class it doesn't really exist. How can I explain? It just doesn't exist. Okay, so this after is something that is after the element that does not exist. So imagine that there's an element after it but there isn't any element actually. Ya So it's what this means is that you wouldn't need to create an additional element and append the class to it. You can just use this after pseudo class to append the content blank, clear both and display table to clear both sides and make it onto a new block itself and it won't float up to the left side. Because previously we have a float which would make things float up. We want it to be the element behind not to float up. We don't want the other element to be affected so we apply this after pseudo class. So we have learned two basic pseudo classes, the harbor and the after class. Everyone clear? Good or good? Fantastic. Pizza? So lunch is ready so we'll be heading down to, you can leave your belongings behind as people that will be here to guard and as people always say it's a safe country I think but in case things go missing So lunch is here you can go outside to the piano area. Sorry? So we'll lock this space up when everyone leave. Feel free to grab your lunch at the piano area. Ya Ya, it's lunch time now. Lunch will be until 1pm so be back here by 1pm and we'll start off to the second part of the CSS itself. Thank you. Sorry? Or This I'll put up Go Go Go Don't need the transition. So I hope you all had a good lunch. There was enough food today so very good. Very good lunch, right? Tasted like pizza So when you actually go for meetups and most meetups they have sort of like pizzas as well so if you go to meetups often you get sick of eating pizza actually Ya So for those who are still having issues please re-create your container and copy the code from the document online Delete your container and then re-create if you have issues with the code anywhere.com It's it's not controlled by her so that's the easiest way of fixing things, right? So I've updated the document as well if you need to copy and paste your code you can go ahead and go to the same document again go to this word box and then copy and paste the class and index .hpml star While I go through the slides I will also be updating the codes on this document so you can actually copy and paste so keep this document panel open so in case you need copy and paste some code just go ahead and copy and paste and it can be done very easily and I'm okay? Good so now let's move on to the next part so before lunch we went through post-tax pseudo classes which are imaginary classes used to modify so we have gone through some of them and we have fixed some issues that we previously had and make things look a lot better now but we want to make it more responsive in the sense that you have mobiles, you have tablets, you have desktops so these devices they vary in screen sizes and as a front-end designer ourselves, we need to be experts and we need to design platforms go ahead with a responsive design that will scale the elements and change the elements as according to when the user screen size changes so we're going to introduce to you what we call media queries so let's take a look at desktop view first so this is what you see on desktop view then tablet and then mobile so you see that there's sort of a difference and it looks it looks as big as big for mobile viewing so even if a person was viewing on a mobile, they will be able to see your text clearly, they will be able to see what is the images and all that they are all skilled nicely and pretty nice, ya so we want to achieve this so previously we used maxWave to make our maxWave to adjust our images to become more responsive by setting a maxWave 100% so now we're going to introduce to you what we call the media queries so media queries are like that so you have the mobile view and the tablet view so within this stuff itself you can actually put in classes and encapsulate within this curly braces so i'm going to quickly show you how we're going to do this so no worries no worries at all so right here you can see that we have got our Dave left block and our Dave right block so our blocks are down here left and right but when we scale it down when we scale it to mobile size can you really see the image you can't really see the image when it's on mobile size so we need to fix this issue so how can we fix this so we're going to do a really simple code here let me just copy and then paste it onto the Google Doc as well so i'll type some codes and then i'll paste it and then explain to you so right now you see that our image has become one single image and the next element has moved downwards do you see that happen okay then when we scale up even bigger and then it becomes like that it hits a point where it'll just become 100% size you see that? you see that happening so this is what we call media queries to do responsive design i've updated the document here to include the media queries right at the bottom of south.cs as you see the media queries down there prefer to copy and paste it in your code itself so this is how you can do so what happens is that these codes here they will overwrite the existing elements that we previously had so the previous one we had a width of 50% so when it hits the mobile media query or max width 768px it will then shift the width and then transform it to 100% as you have seen just now quite a magical thing so that's how basically media queries work they look at the size of your screen and then adjust and apply the classes as accordingly everyone has copied the code from the google doc already and got the same thing did you all achieve the same effect okay i notice that some of your codes are not very readable remember change the spaces to 4 space you can see this thing here there's a spaces fall down here click to 4 spaces there's no standard for this there's no particular standard that forces 4 spaces or 1 space of 2 spaces but i generally use 4 spaces then once you click 4 spaces go to edit and click on the same code beautify it will beautify your code and then make it look nicer right so your intendations and all will be fixed by this beautify command so now my code got beautify so it looks more beautiful you can apply it to index.html as well so if your index.html the intendations are incorrect let me show you what happens when the intendations are incorrect so something like that i just do a edit and i click beautify all intendations will be corrected and my code will look nice right so this is to keep our code looking great and fantastic like what you see here okay so now your code should look more readable in some way have you all done media queries and beautify your code or good okay so let's move on so we've achieve some responsiveness with using 2 media queries but if let's say we want to do more than just that and in the future we have to do more than just floating left floating right and tons of things we have to keep writing a lot of things so no worries we've got this amazing front-end framework called twitter bootstrap although this framework is quite bulky it's quite bulky in the sense that it requires j query and lots of things you still be able to do it quite well okay although a bit slow on very old laptops so we're going to use twitter bootstrap to help bootstrap our e-commerce store and make development much faster we want to do this so that we don't have to keep writing there's already things done for us so let's try there's no need for reinventing the wheel for this yet so let's go ahead and put on twitter bootstrap so you can get twitter bootstrap from gatbootstrap.com if you visit gatbootstrap.com you'll see this thing bootstrap is the most popular html css and js responsive mobile first projects on the web so the bootstrap project was initiated by this small company in the united states called twitter and they have a very small project called bootstrap so let's not go through this thing first let's go to gatbootstrap.com you'll see that we've got keep it open keep the gatbootstrap.com open first we're going to do some things later on so keep it open for now so we're going to go through bootstrap has this thing called grid system so we have this grid system so let's go through what this grid system is so similar to floating lab and floating but at this moment we have something easier for us which is called the grid system that help to make our life a lot easier so how does this grid system so in the in the html document itself you have this thing called the container html the class is a container class and within the container itself there will be row so you have a container you have a row within the container and you've got columns within the container so what's inside a container a row a column do you notice that it's called column dash, lg, dash, trough okay but i'm not trying to promote the prep lg here but lg stands for large so there's different kind of views there's extra small small, medium and large so let's think of it in a very logical manner extra small will be extra small mobile devices small will be your small mobile devices medium will be your tablet and some desktops small size desktops and you have lg which is large which is most of the desktops here so you can adjust we will go into more details to how we can achieve different views within the mobile itself and this trough here means that there's actually trough columns within a row just keep in mind within a row there's trough columns so let me show you how it works so you've got a row and you've got trough columns 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 so just for your information this thing took a while to make and it was a pain in the ass so you can see that there's trough columns down here 1, 2, 3, 4 this is how it would look like if you take 2 column lg2 it will be taking up 2 space column lg3 it will take up 3 lg4 take up 4 so when you've got lg12 it takes up the entire row simple understand all of you can understand the grid system pretty simple so finally i want to introduce this last thing which is called the offset once we get column lg4 and we also input another class another class called column lg4 you get this so in front of it there will be 4 invisible columns but they don't exist at all it's just an offset of 4 columns and this column here is 4 is it confusing? no simple so this is basically your grid system within twitter bootstrap container row columns trough columns and you can offset using offset so so this would be something like what you will see after you use twitter bootstrap this is something you will achieve after you use twitter bootstrap your website will be more responsive and you sort of write CSS codes but this twitter bootstrap is not to completely replace all your CSS code writing it's just to help you do some heavy weight lifting at the beginning so that you can focus on doing the more important things so it's not a complete replacement for CSS code typing you still have to type CSS code just lesser so let's let's get on to doing it actually so i've already prepared some stuff on cloud 9 and i'm going to transfer it over so okay so i'm just going copy and paste what a genius so you will notice i've cutshot a lot of codes and generally leaving behind the general styles so you see there's a lot of kb lifting that is already done by bootstrap that we don't really need to care because bootstrap has done that for us so thank you bootstrap i've updated a code on document itself and you can feel free to copy it in so let's take a look at what our website looks like now so so just a very quick tip so if you want to add a space so called space in your file names don't add space replace the space with a hyphen not underscore but a hyphen so in programming context hyphen actually means a space and underscore means a collector so it's like an kind of thing but yeah that's the difference between a hyphen and an underscore so i've named my image file Olivia dash or hyphen benson.jpack i'll refresh my page i'll get something like that with Olivia benson my commerce store home products drop down so if you all copied the code so let's go through our code that we copied just now don't just let me copy the page so let's start from the top you would have noticed that we've included this thing called latest compound and minify css this is the latest compound css from cdm provider called max cdm and they kindly put up a public cdm for people to use and this is the style sheet this is the bootstrap style sheet that we are using you can see here bootstrap.m dot m i n dot c s s so what does m i n or does anyone here know anyone knows or are you kidding minify okay great you've got a teacher with you right you don't need one more right okay no problem yes it represents minify i think the answer was right which means here are latest compound and minify css so i'll just go very quickly what minify so minify a css file would mean that removing all the spaces from a css file and removing unnecessary things from a css file and when there's compiling it might actually change some stuff depending on what kind of compiler you're using so some of it might be changed to just very simple dot a dot so anyway minify means that it becomes smaller that's it it makes the file become smaller and why is it that we need to make file smaller let's go back to the essentials of the web what is the essential concept of the web the web needs to be open and accessible and accessible so in order for it to be accessible to everyone including people in the developing countries we don't want to eat their bandwidth we want to make it fast which is also another essential concept of the web itself it needs to be fast so when we make the file smaller it's obviously going to get downloaded faster and other than that it's also smaller and eats up as a bandwidth so the developing countries will be able to access your website it won't cost them a bomb in simple terms so by minifying your files and keeping your files as small as possible you're actually keeping the web open and accessible to everyone including developing countries so from the second line we've got this optional team ya you can actually don't include this but I just include it because why not so so there's a quote that needed to be changed index.html there's some part that needs to be changed over here where I included some shit I forgot to change the name so change this part to style.css from style-6.css into style.css okay and then the form should change right so now the form change now we've got and then we've included our style.css our default style.css okay so now this weather changes more more obvious let me drink some water first we've got a naïve naïve element here naïve class equals naïve bar naïve bar before so within bootstrap.css there's this class naïve bar okay and when we specify naïve bar that's default right it's specifying the theme for the navigation bar so there's different kind of things there's different colors which you can actually explore from this segment of bootstrap under css hmm oh it's under components under naïve under naïve bar component has that naïve bar you can see that there's default naïve bar there's blah blah blah blah blah blah you can look at all this code and you'll know what should be done and what should be done that way it can also be infertored so naïve bar dash inverse would mean that it will be black color which is inverse so the opposite of black is white i think okay so so these are some of the classes that we have so other than adjust the default container we also got fluid container which is which will take up the whole script so a container by itself it will have some padding and merging inside the container there will be some spaces so what do i mean by space here so there will be some space here do you see some space here yes there is some space here this is the default container and when we use a fluid container there will be very less space here you see there is very less space here there is very less space here as well there is more space in the container so container fluid it actually means that there is less space there is less padding okay so that's the difference between a container and a fluid container okay and then we put the naïve bar hater so this thing here i'll show you what it looks like so let's do this together when we make our screen smaller you'll see what happen you'll see that this thing comes out you'll see these three bar here it's all right and then you can click on do it as many times as you want okay this is the responsive part of push strap that's been really done for you and this is that particular part okay so you can see that this button thing you saw that the three lines thing so the three lines are created from this icon bar here so there are three lines of this which means that there will be three lines of bar down there so naïve ramp which is over here and then we've got our standard navigation links so collapse means that when it becomes smaller it will collapse into what we saw just now then inside here we've got an unordered list which was what we type on the first way unordered list naïve, naïve bar, naïve bar, naïve bar, right so naïve bar, right means that the navigation will be on the right side which you will see here just on the right side is it on your right? it's on your right anyway and then we've got a collection of links here home, products and a dropdown inside the dropdown you have another unordered list you can see so you can put in more links in the dropdown you see this? ya okay so this basically our navigation bar that we created just now very simple, right so if you want to learn more on the navigation bar you can visit the components components at our bootstrap.com then now comes the body part where we really want to specify our content that will be loaded so our tags and all that we've got deep class container so you can see that we've got container here and within the container we've got a row and within a row we've kindly offset it by 4 and we've centralize it to the center so you can see that it's actually offset it so let's inspect element and let's go deep down here so you can see that we've got a row here we've got container here you see the container and inside the container we've got a row we've got an offset you see the yellow part the yellowish part is the offset part the yellow yellow thing it looks like yellow and the purple part is the padding and the blue color part is the content size which is MD4 medium 4 all good you all see the container effect here good right so then we've got our standard 50% space here so what did we do this time to make it responsive well, initially we define it as MD6 which is 50% of 12 because 12 divided by 6 12 divided by 2 you get 6 we want split into half so we've got it split into half you can see then when it becomes smaller it will become 12 because we specify column-sn-trop so let's look at the effect again it's similar to what we've done earlier on, you do see this and then when it goes to a certain point it then pops up it will become 100% it will become 50% again so just now it was 50% this is just 50% and here then we finally get this is 50% then we get 100% which is 12 all clear on this SM small SM 12 and 6 okay all good right and then we've got the same thing of flag to here and finally we want to include the jQuery library so jQuery library is a library that is called jQuery so it's a javascript library that was written quite a while ago quite a long time ago actually and it's currently at version 3 it's also a it's basically a library to help to help you to handle the functions and all it has some pre-defined functions to make things easier for your life and it's also quite bulky if you look at the size of the jQuery library it's around you can visit jQuery.com and then you'll see the size of jQuery right where's the size get it okay so let's just do a network test and then how big this file is so very quickly we refresh our page and then we'll see oh the bootstrap file is 120 kilobytes the team is 22 kilobytes with 4 kilobytes and 36 kilobytes so we've got around 240 kilobytes ya so we've actually added in 240 kilobytes just to make our life easier so you can see that bootstrap actually makes our life easier but because of how it is right, it's a front-end framework it has a lot of gig it's very huge, it's very slow it's 240 kilobytes which is quite huge so if necessary to use jQuery try not to use bootstrap unless you're doing a big project unless you're making full use of the project itself you don't need bootstrap simple but later on we'll teach you how to minify and how to create a build process to make sure that all your files will only include classes and all that is needed for whatever you need to do so so now we've known that we've got a jQuery library we've got a minified bootstrap css you can see here minified bootstrap css minified bootstrap javascript file so inside these javascript files you'll contain all the functions that is needed to run your navigation bar your drop-downs and everything ok so i assume now that you're all experts in css and html so everything must have been a very smooth sailing journey for you bootstrap and everything has been easy and a piece of cake for you so right now we're going to do something more interesting we're going to dive straight into PHP so we've got some experts who are quite good at PHP they're quite good at PHP as well so Justin in particular is very good at PHP he's been doing PHP for how many years that's a lie so i assume that's 5 years ok so we've been doing PHP for 6 years and so PHP is one of the PHP you'll see that PHP hypertext preprocessor so PHP hypertext preprocessor it sounds funny so it's what we call a recursive acronym ok it's a recursive acronym so what is PHP? PHP hypertext preprocessor alright got it ok never mind ok so what happens run PHP essentially right so when a user visits a website the web server receives the request the PHP file is found and sent to the PHP interpreter the PHP code is then interpreted and result is sent to the web server the web server then serves the process PHP content simple or understand this ok so let's go in depth a bit more to how this even works right is it some website some small company website such as facebook.com they run PHP there's plenty of small websites out there that run PHP so what are the small websites run PHP i guess pretty much that's about the smallest website that runs PHP i think there's also other websites such as Alibaba that runs on Java Spring Framework those are other languages but we are looking at what PHP does here so when you visit a website PHP visit facebook.com facebook.com server it has a web server it could be a party, it could be engineX but i think facebook uses their own facebook web server or something anyway the web server for example a party we will see the request oh it's a request from blah blah host is what uri is what phone name is what HTTP version is what etc etc so many haters information so let me give you a very quick look no website okay so let's close all the chat boxes and then inspect asmr okay so just an interesting fact facebook has this front end framework called React.js and Justin is an expert in React alright yes Justin he's small as a yes you can see that when you send a request there will be a URL this thing is very small you see it's crazy this website ticks up 8MB right it ticks up 8MB just to render this entire page and it's yeah it's how set the work has become now it becomes 10MB anyway when I visited this URL like that it's a get request then the file I requested was just slash you see here there's nothing behind I didn't tell me LL or something so when I do then it will be something else so let's try LL you see the file will be the file you see here is LL.php the file was just a slash then the domain and pretty much that's it that's what really happens when when you visit pagecode.com the web server receives the request that is the web server receives the request and then it sees that oh it's actually a slash so what is the slash going to represent so as usual slash represents the index file and in this case it could be index.html or it could be index.php but for this.com it would be index.php so index.php is then send to the php interpreter or the and there will be a php engine running underneath the send php engine and then the php code is index.php itself will be interpreted it will read through the entire index.php code and then it will run and the result whatever is outputted on index.php is then send to the web server oh okay now i represent now i send the LL display a message LL to the particular web visitor so that's really it so now i want i want you all to do a very simple hello world program in php actually this is just this part and you will bracket question mark php echo hello world so let's try try this out now so under here i'm going to try to not kill myself hello world.php so i'm creating a file name hello world.php php so in order to run this php thing we need to start it off like something like a document decoration in hdml but this time we're declaring that what is here is php code okay so that php will know that oh hey we're going to start running php we're going to start interpreting php code from here onwards anything before that will not be interpreted as php so anything here will not be interpreted by php so now let's just do a very quick echo hello let's make it more exciting born is this how we pronounce it and close it with a semicolon right and then we're going to visit slash hello dash world.php slash hello dash world.php after you have created a file here like that new file hello-world.php okay save the file and empty it here look at this bonjour let's go back to the code again all good so actually we can do more things to it we can go like hola I'm Taylor Swift okay so when you change the code and then you refresh bonjour hola I'm Taylor Swift i'm a snake so in case you didn't get the reference you can search it up yourself okay so everyone got this easy right okay so now that we've done a hello world file we've achieved a next stage of web development we're going to go big we're going to create the next Alibaba of Singapore and they make carousel and that's really about it for the first part which is just echo hello world this is a very simple function that anyone could do and now we have achieved that thing that anyone could do you are now anyone do more than just anyone we're going to become number one but in order to become number one we need to go through some simple instructions that all humans should be able to understand so these simple instructions is called syntax so within every language itself we've got this thing called syntax which is construct of every single life so in html html all the structure itself which represents what html really is so in PHP we also need structure to govern its life we need structures to help us have some basic form of governance within life so PHP needs that as well it needs to know what you're even typing so we need to know how to write this code in a structural okay so we've got this thing called syntax so the first thing I want you all to know is that we're going back to secondary school we're going back to our basic fundamentals of algebra so in algebra and mathematics we've got this amazing thing called integers anyone know integers? so none of you know go back to secondary school right now just could be negative numbers zero is one of the integers it's a it has no decimal places it has no decimal points of anything it's really a number like that it can be negative it can be positive or it can be neutral which is zero this is just one of the algebra things you would have learnt in secondary school and just want to refresh your memory a bit other than that we've got values which are true and false there's no maybe it's just true and false not like life where there's always this maybe and we've got string this is just a string just now we've printed out an echo hollow bone that was a string simple wasn't it we've understood that there's integers, booleans, strings what else is there? floats which i don't really know which is just pie representation so essentially floats are things with decimal points that could go up to 32 bit floating points i think i've forgot how many bit floating point it is but it's around there so it can go up very long but the longer it goes up to the lesser precision you have so floats are not as accurate as integers so if you go beyond a certain limit and you do calculation it can't calculate properly because that's how floats work you can't have a very fixed precision in some sense and that's why when you do calculations that are sensitive you need different kind of programming languages to do this kind of calculations because some programming languages and doing this sort of float calculations and you've got arrays it can be an array of numbers an array of strings it could be a hash table and then one knows what's a hash table hash table okay so hash table sounds like hash brown but it's not it's a table so you've got this thing representation of a key and a value similar to what we've learnt in CSS where we've got a key and value and encapsulated within the curly braces so essentially what we have here is a hash table okay so we're going to depth into how arrays work later on HP is a very special language in terms of arrays and we've got now now is now is not void now is now so it's it's like nothing but it's just now sounds weird doesn't it but now it's a type of variable as well in mathematical terms we've always come across this term as well then we've got also void which is not now okay void is essentially empty and nothing but by default HP is juggling so in the circles you'll see there's people who juggle things around and that's what HP is is a cloud that juggles the variable types so any variables can be integers, it can be bullions, it can be blah blah blah so what it means that it's a loosely typed language so different languages some of them are strictly typed so strictly typed languages will be something like Java Java what else Titan they are more strictly typed and we've got loosely typed languages such as javascript, PHP and many pretty much about it so these are loosely typed languages so let's take a look at some of the examples first so you don't need to type this code but you should if you want to so and what we're going to do here is we're going to juggle the variables so when you can see that we declare variables with a dollar sign in front so let me ask you a question when you receive a file when the computer receives a file how does it know if it's a variable it doesn't, it can't really know if it's a variable unless there's something that tells it oh, this is a variable so in PHP we tell PHP that this is a variable using a dollar sign you see that dollar sign there so now when PHP reach true it knows that hey, this is a variable and we are setting a variable as hello world and when we echo the same variable this is some variable it will output hello world after that it will change that same variable that was declared earlier on to spike and we echo it again it will output 5 if you ever try to do this in strictly type languages such as Java or anything else like Python and all you can't do it because there should be type and they don't juggle the variables around and all that if the touch can change very easily just like that just by setting it like that you have already changed the variable type very easy and loosely type so we've understood some part of the variable juggling let's go on to more of the complex part of the operators so anyone know what operators no one i think you need to go back to primary school already so this is some things that we've learnt in primary school plus minus divide so let's go to rest in forward addition, subtraction, modulus multiply, division power of set is equal, straight equal add to, subtract form increase by 1 and all so let's go through it more slowly this time modulus is something that would be a bit particularly new to those who have not learnt programming modulus is when you divide something and you get a remainder so let's say when you do 5 modulus 2 what is the remainder anyone know what's the remainder of 5 divided by 2 1 yes, so so when you do that 5 modulus 2 you get 1 it's essentially getting the remainder of what has been divided off so 5 modulus 3 you get 2 5 modulus 4 you get 1 what about 5 modulus 5 you get 0, yes, exactly so that's how modulus work operator that you might not have heard of okay, this is easy so division is there's no dot slash dash dot in this language in PHP we call this front slash which represents a division so if 5 slash 5 it's essentially equivalent to 5 divided by 5 which is 1 right and we got power off which is what is this thingy yeah it's erat what? carrot oh, carrot it's a carrot T-I-L this thing is carrot okay, thank you it's a carrot okay doesn't it look like carrot so yeah, this is a power off which you will have learn in secondary school I think you will know what is this so set was what we showed you just now dollar sign variable equals something something but a single equal sign is setting something but a single equal sign is setting of the variable but a double equal sign is checking whether the value is the same is equal or not and we got triple equal sign which is a strict equal comparison right this time, since PHP is loosely tied a string of 1 could be the same as 1 itself right and a string of 1 could be the same as 1 and could be the same as 2 okay so, when we use a strict equal it will strictly identify the type which could be string it could be integer it could be true false so if I were to type if I was to check if something is strictly a integer of 1 if passing a string of 1 it will fail it will return a false we will have some code to show you how so add2 is to add to the existing variable add to append the value to the existing variable subtract from the variable increase by 1 is plus plus decrease by 1 and operator sesuatu dan sesuatu operator sesuatu let's get all the code itself let's play with some variables you can try to write this code and the same so get practicing a little bit in the whole world of PHP don't sign in underscore variable equals 5 in variable plus plus echo in variable what would you get? you'll get something like 6 one is i'll get 6 6 is very small but yeah what I did here was I increased by 1 which is the plus plus operator I just use the plus plus operator you'll understand the syntax of setting and increasing by 1 simple just remember that these are your x, y, z in your algebra classes just that we are putting a dollar sign in front of it so we could be something like dollar sign x dollar sign x 10 dollar sign x so this is exactly what you've learnt in your secondary school classes of basic algebra which is very basic we are not even doing any problem solving in math yet so these are really simple so when what happens when 5 get increased by 1 it becomes 6 then output 6 everyone clear? good all good thumbs up anyone? I only see one thumbs up so I'm going to wait a while you all understand? ok so I'm going to move on so now we've we've done something with operators very simple play we want to do more than just that this is just secondary school work let's move on to secondary school 1.1 which is to add 2 so when you do this it adds the value given here so you've got 5 imagine this thing is 5 and plus the 3 so invariable will then become 8 it's adding the 3 and then setting it to 8 so just now was just increasing by 1 only plus now if you want to increase by 2 or 3 or 10 or 100 or 1 trillion you use this plus equals ok? so I'm just going to type in a code as well but along with all of you plus equals 3 then I get 8 so down here I get 8 are you all starting to feel it? feeling how would be feeling to regret that you didn't pay attention to your teacher in math class right? so unfortunately teacher's days was over so I hope that you guys have all visited your teachers in secondary school and thank them for teaching you math right? so ok so very simple secondary school 1.1 let's move on to 1.2 which is to minus same as the plus but now with minus subtract drop so minus equals 3 it will become 2 very simple all of you got it already? minus equals which is essentially the same as plus except you are subtracting simple can you see? can you see? so this is just a subtraction part so let's move on to even further now we use the if else so this is where the part where we do logical checking we want to test whether you have a brain that is logical so obviously your calculator has a brain and it can think logically but not all humans can so anyway we are going to use what we call comparison we want to check whether this thing is this thing is this thing is this thing or what for anyway what will be the result of this before that we are going to run through a quote a bit explaining through what is happening so simple decoration variable decoration here int underscore variable equals 5 and we check if integer variable is equal to 5 so is 5 equals to 5 yes so what do we do? we add code LL and that's it it stops there nothing more nothing less it just ignore the rest of it else if and everything simple logical operator we will use if if operator equals is equal which is a double equal sign not a single equal a single equal is a set setting a variable then echo LL so when you run this script it will output on your browser LL and you might be thinking what is this else if what is this else so if the integer was 6 if here it was 6 it will run through this is 6 equals to 5 no it's not let's continue down the road is 6 equals to 6 yes it is then you will print out ruffle is that how we pronounce it alright so what if we change this interval integer variable to 7 so we will go through again the logical if else check is 7 equals to 5 no it's not so we go down to the next else if is 7 equals to 6 no it's not so it falls to else then it will just print out lemau so if it's not 5 if it's not 6 it will just print lemau lemau so take note that these are curly braces which is something that is similar to your CSS and remember that everything has to end when you run a function or anything it has to end with a semicolon okay so let's just run through this preparatively so when we run through this you go here it will say law and when we change from here 5 to 6 and then we refresh we get ruffle and then we change it to 7 we get lemau lemau i particularly like this phrases like law ruffle lemau because they sound very weird everyone got it? cool? okay that's great so now that we have gone through some very easy logical checking let's go on to the next step or so what will happen here can anyone tell me what's going to happen here what will be the result law okay you get a t-shirt as she said the result is law why is it so anyone why is it law why is it not ruffle the second part here it says it's checking if it's equal to 5 why does it it's not here at the law so well there's a very simple reason behind this let's relate back to how PHP variables work so PHP variables they are of juggling type so what is a true and what is a false a false is a zero in binary terms in binary terms we got 0 and 1 so a false is a zero so anything that is not zero is true so we got 5 we got 5 and if it's checking if 5 is true if 5 is not zero 5 is not zero so so this is this might take some time to digest in you need to swallow this in if needed so this is the magic of juggling with PHP variables but here comes a tricky thing so when programmers they develop their applications like that what would happen you'll get a bunch of spaghetti code so spaghetti code is essentially codes that looks like a power of mass so if you really want to check whether available is something or something like that would highly suggest you to use this kind of equal sign so that the next programmer that takes after your work won't call this work a piece of crap so leave some code that are readable have codes that are consistent so these are very essential things that you need to know so so one will be the result and one knows the result okay no it's not so the result is actually raw fold so back to the juggling thing again when 5 modulus by 5 you get a remainder of zero so it skips it skips the law then it goes to the second part integer variable modulus 3 is 2 so you get 2 which is not zero which is true and then it brings raw fold so this is some of the shending guns here so this is how you use modulus do you all want to take a break first you all seem very tired 10 minutes break okay okay great we'll pause for 5 minutes break until 2 2.30 3 2 2 3 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 5 5 5 5 5 5 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 3 3 4 4 3 3 1 2 3 1 1 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 Well, this is how it looks similar to how declaring and getting a value from a particular array. So if you want to go inside that particular array, we could use a 4 each. But in this scenario, we just want to pick out certain elements, certain things, certain parameters within this post values. So we only specifically want to get the username and the password. So, where is this username from? So, look back at the index. Sorry, look back at login.html. The name. It's the parameter name. And we've got the parameter name for the password itself, which is password. So, username, password are the parameter names. Wait, it's not just name like that, it's key value. So, now we want to retrieve the post variable within this array, which we can get it through using open square bracket. Single code, username, single code, close square bracket. Simple, right? This is how you access the variable within an array. Cool? Understandable? Okay, if you ever don't understand anything within PHP itself, experiment and voldam the results. And you'll know what is the thing even. Okay, so now we want to check whether the user is admin or member or whatsoever. So, let's create an array of users. So, just now we've done... Okay, I'm going to put it out on block first. Hold on. So, now it will tell me that I'm login as Uberian. Simple, right? So, we've made use of 4-each loop, which was port just now. So, you see that we've got an array within an array. So, how does that even work? So, this is what we call multi-dimensional array. So, an array within an array. Cool, right? So, essentially, what we can do is that we can have even more users. So, the guy wearing the green jacket over there. Yes, you. Yes, what's your name? Fabian. Sorry? Fabian. Okay, Fabian. What password do you use? Why didn't you give me a real password? Okay, so Fabian has kindly surrendered his password to me. And now I can login to his emails and Facebook accounts. Anyway, so, we've got an array here. And inside this array, we've got 2 arrays. Do you see it? We've got one array, one gigantic array that encapsulates 2 arrays. Understood? Okay? No? Yes? No? Okay. Okay, so, essentially, previously, we've declared a new array here, right? So, we can actually put in... There's a different type of variables that we can put in, right? We can put in strings, we can put in integers, we can put in another array, right? So, we can have an array inside an array inside an array. It goes on and on, right? So, here, we've got one array that contains 2 arrays and inside each of these arrays that are contained within this gigantic array has a username and has a password. Okay, so, this username, here, is the key. And this is the value. Key, value. Key, value. And if let's say you don't define a key, which was what I did here, I didn't define a key for this array, here. There wasn't any array... There wasn't any key defined for this. It would just automatically define it as zero. The key would still be existed, which would be zero. So, although I didn't define a key, there's still a key, no matter what. Right? So, down here, we went through a for loop, well, sorry, for each loop. So, for each user we have, it will be as a user. So, we've got 2 users down here, which is 2 arrays. Each user is represented with 1 array. This is the first user. This entire part, here, is the first user. The second part, here, is the second user, which is failure. Right? Okay. So, what this means is that, and... So, what this will do is that, it will check if the username is the same as the username inputed in this array, here. Right? And then, it will check if the password, the password that is in the form is the same as the password given here in this array. It's just essentially an is equal check. Right? Very simple. And if it's true, we say that, we print out lock in as the username. And then, we break. Break, which is to get out of the loop. Because, once really locked in, we don't really need to go through other iterations. We've really got the result we wanted. So, what's the point of renewing the loop? It will just waste more resources, right? So, we just stop the loop. Since we've already got our job done. Right? So, we break the loop and we get out loop. And, everything is set. Okay. It's a pretty easy concept, here. So, so as you can see here, the password are stored in plain text format. Right? And the password here is still plain text, as well. It might be a security issue down here, isn't it? And let's look at another issue that we would have. Right? Let me show you a particular issue that we've achieved down here. Okay. So, I've, in particularly, username here, username here. Well, printing out the username that was given to us, right? So, what we could potentially do is do this. Right? We can say this, LL Hmm. No. It can't. Okay. So, let's do a simple something. Hold on. So, we've got a true or false boolean, here. Which is initialised as a false. And then, when the user is logged in, it will be changed to a true. Simple, right? And then, after the loop, right? We'll do this. Ascremation mark. Okay. So, ascremation mark is the inverse operation. Right? So, if the value is true, it will become false. If the value is false, it will become true. So, right here, if the user is logged in, it won't do anything in here. Right? Is this clear? Only users not logged in will do this. The ascremation mark is the inverse of the variable. Right? So, yeah. I understood. So, when the user is logged in, logged in is set to true. Is set to true. Right? And here it checks if false equals to true. False does not equals to true. False is not true. I mean, sorry. False is not true. So, what do you do? False is not true. So, we can't go in anymore. We don't go in here. We just keep. Right? Okay. Good. So, only users who failed to log in will have this. Something like that. Right? Okay. So, let's take a look. Don't worry about the code yet. I'll just show you all quickly. So, I type a wrong password. I type a wrong password. Here. Then, you tell me user name is incorrect. Right? Because there was a wrong password. Okay. So, let's do something funny here. Let's actually put in some HTML elements into it. And then, we give a wrong password again. And you see that now your username has become, has been injected with HTML. Right? So, one general rule of thumb from one general rule of thumb is that you don't want to trust any input that your user give. Right? So, any input that is sent to the server should be sanitised, should be tagged. And so on and so forth. Right? Because right now, I can send some HTML over and possibly do something that even do more damage. Right? This is just a very simple scenario of the importance of sanitising user input. Right? So, how do we sanitise this input that was given to us? Right? We use what we call HTML entities. Right? So, let's take a look here. Is it HTML entities? Okay, so it is. So, let's refresh this page. Wah, this is slow. Okay, so, what it will do is it will clean up. Clean up and start. Right? So, this is just one of the basics of sanitising your user input at all. So, we're going to upload. I'm... Are you kidding me? Anyway, you see this? No? No, it does this. Okay? So, I'm going to upload this code right now to... to the... this thing here. So, yeah. That's how it will work. This is a very simple sort of like a login with no session. No session yet. But we've managed to have some sort of basic login. Right? So, that's it for today's workshop, I guess. Everyone understood everything so far? Good. Maybe. Yes, no. Okay, feel free to stay behind if you have any questions. We'll be still around and ask us any questions if you need anything. Yeah. And, of course, the code will be out of Google Docs as well. The video will be uploaded out of the engineers.sg for people to recap whatever they need or for folks or for folks that will not able to make it for today's lesson. To this workshop. And, yeah. Thank you all of you for coming down and especially all our volunteers, Ivan, Chester, Justin and all our volunteers who helped out. Alright. Okay. Good silent. Okay, hope to see you next week. Thank you.