Skip to main content

Posts

Final Thoughts: What's The Point To Learn Web Develop?

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...
Recent posts

GIT Study Note: Six Git Commands You Should Know!

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. ...

Authentication Project: Secret Page App Part Two (Login/Logout)

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...

Authentication Project: Secret Page App Part Two (Sign Up Page)

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 .  ...

Authentication Project: Secret Page App Part One (Set up & Create User Model)

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....

Intro To Authentication: Three Useful Tools Will Make Everything Easier

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.

Data Association Study Notes: Six Steps to Embedded Data

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...