Learn Bootcamp From Zero

I can't believe that I have finished the whole Web Develop Bootcamp course . From Google Image In this blog, I shared 80 key study notes about web develop which includes frontend and backend. Every note introduces the basic concepts of certain topics, and show the screenshots of codes, and explain each process. I also shared some small project studies to implement all the related code together to make the learning more meaningful. The learning process, for me, was not easy. I have to say it was so struggle. Sometimes I couldn't get the concept about the logical which made me very confused. Sometimes the code did't work in the server even though I typed the exactly the same codes as the course did. Whenever the problem was happened, I couldn't sleep and couldn't eat.And this kind of issues had driven me crazy thousands of times. At some points, I did want to give it up. It was just so hard for me. And my goal was not to become a developer, what's...

What is Git? According to Git website , Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Basically, we can use Git to track all of changes and revert them back if we made mistakes. The version control system is a way for us to work with different versions of our code, so that we can save different features and make notes as we progress. It is also very useful for team collaboration. Six Git Command You Should Know 1. Git Init In our server, we need to create a "Git" directory and inside of "Git", we make another direcory "git_inro". Then, we add a file "app,js" in the "git_intro" folder. The first thing we need to run is "git init" . When we run git init, it will make a directory which is hidden called ".git". Wherever I run that git init command, it's going to track all of our changes. ...

Login Routes Step One: Add login route For login, we need to write a "/login" route to render to the login page. At the same time, we need to create login page in the "view" folder. Step Two: Set up the local strategy Then, we need to set up the local strategy to be "user authenticate". Step Three: Write post route and add middle-ware Inside the app.post, we pass in "passport.authenticate", which is a middle-ware. It allows codes that run before our final route call back. When app gets a post request to "/login", it's going to run this code immediately.  Step Four: Run the app We run the app and can see the login form. Then, for every page, we add three links: sign up, login, and logout. So the homepage will look like this: Logout Routes  Logout routes are very simple. We need to create a "/logout" route which will log user out and redirect to the...

Sign Up Page After a complex set up process, finally we can start to write our routes! Step One: Write register route We will write our register route which will render to a "register" page. In this page, it will have a simple sign up form. Step Two: Create Sign up form We add "register.ejs" in the "views" folder. Then, we create a simple form which the url link will be "/register". Then, we run the app.js and get the "/register", so we can see the form. Step Three: Set up body parser For every form post request, we need to add body parser to make it work. Step Four: Handle user sign up Once users sign up, it will lead them to the secret page. Therefore, we need to write a post route. Inside the post route, we add passport authenticate , which will log the user in and store the correct information and run the serialize method. And we specify to use "local" strategy .  ...

So far we only write the RESTful routes to send request and redirect to the related page, but we haven't do anything about authentication. If we can sign up, login, and log out, it will make our app more meaningful. Therefore, the course shows us how to create a secret page app, which will allow us to sign up, login to a secret page, and logout. Since it requires so many pieces, I will divided this project into three parts: set up & create user model, sign up, and login/logout. In this post, I am going to show all the set up process. Set Up Step One: Install packages The first thing we are going to do to create a folder "Auth", and inside of "Auth", we need to create another folder "AuthDemo". Then we cd (change directory) to "AuthDemo". Now we can set up the actual application structure by installing a few packages: passport, passport-local, passport-local-mongoose, mongoose, express, ejs, body-parser, and express-session....

Authentication is very important for both users and websites. It helps to keep users' information safe and also helps us to manage the accounts. Authentication is also complex because there is a lot of moving pieces that have to fit together in just the right way to make that work. The course introduce three tools to make authentication more quickly and safely. 1. Passport.js Passport.js will make our life easier and make our code shorter. It also helps to make implementation faster. Most importantly, it is used a lot in the real word. 2. Passport Local Passport Local is for username and password. It's about providing this entry point into all sorts of destinations. 3. Passport Local Mongoose This package will help us implement authentication with passport, and it's specially made to work with mongoose. We are also going to use these three tools into a Secret Page App project, which will show in next few posts.

What is Association? Association will allow us to have multiple pieces of data collections in our database that are related to one another. Just like a Facebook user can have multiple posts or images in his account. Three Types of Association One to One:   One of entity that's related to one another entity. For example, one student has one unique student ID. One to Many:  One entity that's related to many of other entity. For example, one student has multiple social media accounts. And those social media accounts only belong to this student. Many to Many:  Many entity related to both ways. For example, one student can take many course, and one course has many students. Embedded Data In this example, we will do the "One to Many" type. We have user and post. We want one user to have multiple posts. Step One: Set up and define schema Firstly, we need to create a new file "embed,js", and npm install mongoose. Then, we require the mong...

I have been followed the course to develop several app projects. They all follow the RESTful route pattern. Today, I learned many key points about RESTful and would like to share my study note here. What Is REST? REST stands for representational state transfer. I don't know what does this mean, but it is not important right now. You just need to know that REST is just a pattern for defining our routes. What's The Point Of REST? The important things for us is to define what REST is. REST is a way of mapping HTTP routes and CRUD functionality together. By the way CRUD stands for Create, Read, Update, and Destroy. The point of REST is that we don't do whatever we want. Instead, we follow a pattern. It is also more reliable so that if we are interacting with a restful API, it follows a particular pattern. Seven RESTful Routes The course lists the seven route table. It just acts as a pattern that we can fill in the blanks when we develop our own App. screen...

What is Mongoose? According to Mongoose , Mongoose is an elegant MongoDB object modeling for Node.js. It provides a straight-forward, schema-based solution to model your application data. Basically, Mongoose is a package which helps us interact with Mongo DB. It is a JavaScript layer on top of Mongo DB, and it adds some extra special methods that makes our live easier. How to Install Mongoose? The installation is very simple. We just need to npm install mongoose in our server. Then, we create a JavaScript file, and require the mongoose. Since the Mongoose needs to interact with MongoDB, we need to open another terminal window to call "./mongod"and make sure the MongoDB is running .  Then, we connect Mongoose with MongoDB: mongoose.connect("mongodb://localhost/score_app") . Score Database Project Study In this project, I am going to create a score app which contains student score data. The score data includes three main entries: name...