Skip to main content

Posts

Showing posts with the label project study

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

Database Project Study: How To Use Mongoose To Model Your Database?

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

JavaScript Project Study: How To Create A Simple Todo List APP?

After I learned JavaScript loop and array, it's time to implement those codes into a simple project and see how it works. The course instructor leads us to create a small To Do List APP. Basically, when we open the web page, it will pop up a question:"What would you like to do?". Then we enter "new" and add a todo. If we want to check our todo list, we need to enter "list", so we can see our todos are stored in the console. The question will ask you again and again until you enter "quit" to end it. We create a HTML page and link to a separate JS file.  In the JS file, we start to write a  todos array . We leave the empty[] since we will enter data through the pop up question window.  Then, we create the pop up window by writing a prompt("What would you like to do?" So when we open the web page, it will pop up this question to ask you to enter your todos. Next, we use while loop to let the site keep ask...

JavaScript Project Study:Four Steps To Build A Simple Guessing Number Game

So far I have learned some basic JavaScript language such as conditional keywords, logical operators, and built-in methods. Today, we will build a simple guessing number game by applying those JS basic language. Basically, the game is ask user to guess a number, if the number is match to the secret number, they win the game. If not, they will have to try again. Step One: Create a simple HTML page and Link to the JS file I start to build a simple HTML page and give a title "Guessing Game" for it. Then, I create a separate JS file named "game.js", and link to the HTML page. Step Two: Create Secret Number and Prompt Question In the JS file, I start to create a secretNumber which is 6. Six is a lucky number in China which means everything goes well as you wish. Then I ask a prompt question:"Guess A Number", so user will enter a number. Step Three: If users enter the right number, they will receive a message It is conditional, so I u...