CMPSC 431W Spring 2019
Project Setup Tutorial
Overview
This tutorial aims to provide information about setting up the development environment to be used
for project management and database application development in Phase 2, throughout the rest of
the semester. Note that the project requires you to build a web site. The precise details of what
you will be implementing will be shared later. The elements to be implemented include 1) the
front-end web page; 2) the web/application server; and 3) the backend database. We first describe
the system architecture of the database application in brief.
HTML (preferably coupled with CSS) are used for front-end, which defines the look-and-feel of
your website. For the web-server, we suggest you use Python. The installation instructions can be
found in the section entitled“Install Python”. In addition, we recommend FLASK, a Pythonoriented
web development framework which helps to productively implement your website
functionality. FLASK provides an API to receive requests from the website (such as form
submissions, clicks, login request, etc.) and return responses back to the front-end (such as display
the result of a login – success or failure, display information as requested by the user, etc.)
Moreover, all SQL queries are issued by FLASK to the backend database in response to user
requests. For example, consider an application function where a student asks for his grades to be
displayed, FLASK issues an appropriate SQL query to the database server, which retrieves the
data and return it to FLASK, which in turn sends the result (with proper rendering) to the client
(browser) for display.
SQLite is suggested for use as the database management system in this project due to its portability.
SQLite works by maintaining a local“database file”which will be queried by your application
(i.e., the website). SQLite3 (a version of SQLite) execute a query and returns its result to FLASK.
In the FLASK framework, there are some‘@’statements to define the front-end requests in
various situations (login, display grades, show professor details, etc.) The functions under @ are
called when the corresponding requests are received. That function in turn submits the
corresponding query to the database and returns the result back to the front-end.
In our starter code we use render_template() and request(). render_template() uses Jinja2, a full
featured template engine, making this method very powerful because all you need to do is to
provide the HTML template and the variables you want to pass. Jinja2 is inspired by Django’s
templating system but with extension to an expressive language. For the project assignment, this
method saves you a lot of effort on communicating with front-end and back-end.
request(), for access inside the template, is a global object for taking requests from the webpage.
We show access of the data in our starter code using the form attribute. For more details of FLASK,
here is a link of its docs: http://FLASK.pocoo.org/docs/1…
In this project, we recommend PyCharm as the IDE and GitHub as the project management tool.
GitHub is required for the purpose of grading. PyCharm installation and basic GitHub
configuration process are instructed in the corresponding sections, as the self-explained section
titles indicate. Finally, in the last section, you use the environment you set up (as described in the
tutorial) for exercise. You need to correct the errors in the code and complete a commit-and-push.
This whole set-up may take a while to complete for the first-time user, but it is very useful not
only for reducing your effort/workload for the project but also beneficial later in your career.
- Install Python
You should install Python if you don’t have it installed on your computer. For the operating
system that does not have a pre-installed Python package, you may download an installer from
the Python official website. For our course project, Python with version 3.5+ is recommended.
To make sure your Python installation functions properly, open your terminal and type: - Python3
Or, if that does not work, just type: - Python
Here is what you are expected to see: - PS C:\Users\431W> python
- Python 3.6.8 (tags/v3.6.8:3c6b436a57, Dec 24 2018, 00:16:47) [MSC v.1916 64 bit (AMD64)
] on win32 - Type “help”, “copyright”, “credits” or “license” for more information.
-
If you have trouble running the interpreter to check your Python version, please ask us for help
via Canvas.
It is important to confirm that Python is installed on your system. To exit the interactive prompt,
you can type: - exit()
and press Enter. On the Mac OS X and Linux versions of Python, you can also press Ctrl + D.
On Windows, the exit shortcut is Ctrl + Z, followed by Enter. - Install PyCharm
PyCharm is an integrated development environment for computer programming, specifically
designed for the Python programming which are used for our project. PyCharm, supporting
Python FLASK web framework along with frontend (client) and SQL (database) support,
provides an ideal full-stack IDE for Python. PyCharm is compatible with Windows, MacOS, and
Linux. Developed by the Czech company JetBrains, it is eligible for free license with a Penn
State account.
For our project in this course, we recommend using PyCharm to complete your Phase 2
implementation. You may choose to use your preferred web development tools on the project
assignment, but it is your own responsibility to make sure you are familiar with the tools you
choose.
First, go to https://account.jetbrains.com… to register your account with PSU Email. You
need to remember your password since it is needed during the installation. Please follow the
instructions, go to https://www.jetbrains.com/pyc… to download the software.
It is important to download PyCharm Professional. The machines in the CSE Computer
Labs in Westgate are already equipped with the Professional version.
After the installation completed, you shall see the prompt as shown below, when you run
PyCharm:
*For those who use machines in the lab: you will need to bring your PSU ID card to enter.
Also, you need to login with CSE password, which may be different from your Penn State
Access account. If you need assistance on the account, please go to ITS Help Desk located at
W100 Westgate. - Configure GitHub
If you don’t have a GitHub account, create one first at GitHub.
Link your GitHub account to the 431W classroom repository by going to:
https://classroom.github.com/… and link your account to your name on the roster
shown in the page. If you do not see your name, please contact the CMPSC431W TAs/LAs via
Canvas immediately.
You will see your own private repository with the starter code we provide. This is where your
project being managed throughout the semester. - Clone the Project
Now go back to PyCharm and check out the starter code from your private repository at GitHub: - Open Settings in PyCharm from the Configure menu, In
the Settings/Preferences dialog, select Version Control | GitHub in the left pane.
Click Add account and type in your credentials. - Go back to the prompt and Tap Check out from Version Control. Select Git.
- You should be able to see a list of your repositories from GitHub by clicking the arrow.
Select the repository for the project we just created. - Tap Clone and wait until everything is completed. For the first time it may take a while to
install the packages. You should see a file named app.py ready for you in the edit
window. Note: For windows, git.exe is not preinstalled. If you see the error message
“missing git.exe”, follow the instructions to download. You may also need to update
Path to Git executable under Git in your settings, (the path is like C:\Program
Files\Git\bin\git.exe). - From the left click project and select app.py. You should see a starter python code.
- Check if you could run this program first. On the top right, click on the green arrow to
run. If you see the arrow gray, right click inside your app.py file and it should configure
automatically. Note: You might need to configure your interpreter as suggested by
PyCharm. Follow the instruction and select your installed Python. - A built-in terminal-like window will show in the bottom, indicating that your project is
running. Click on the address. For example, it could look like this: - If you make some changes, you will have to stop and restart the program. You do not
create a file at this time, but in the future, you must add a new file to your Git when you
create a program. - After inserting names, the database has been created under the current directory labeled
red. This is normal because it is not added into Git. Your code is supposed to generate a
complete database file(.db). - Commit and push your code. This is an important step as we only take the code from
GitHub. For your information, commit happens in your local directory, and push is to
upload your changes to GitHub. - One way to commit and push is to click on the green button on the top right at Git, put
some commit message, and select commit and push. Then it will be pushed to
origin/master at your remote repository. - Double check your repository on github.com. Go to your private repository and
specifically look for the commit message you just entered. You can also check the latest
commit time on the right. - Please note that we will use the latest commit time on GitHub as your submission time.
You can commit multiple times and push them all before the deadline. For grading
purpose, we only take your code from master branch. So, do not forget to merge your
branch back to master if you prefer working on a separate branch.
APPENDIX
Lab W204 Westgate – Setup Information for MySQL and MongoDB
MySQL and MongoDB are two well-known and wide-received database management system,
which will be used to perform some homework assignments. Moreover, while our project in
this semester does not require you to use them, it’s beneficial to acquire such skills and gain
some experience. The following instructions introduce the steps to connect to the MySQL server
and MongoDB server in Lab W204. Both of MySQL server and MongoDB server have been
configured in the host“cse-cmpsc431”which is designate for our course. If you want to use
MySQL, you can use computers in Lab W204 to make a connection to the MySQL database
server. If you want to use MongoDB in Lab W204, you need to use ssh to login to the host csecmpsc431
first, and then use MongoDB in that server. In the following, the setup steps for
MySQL and MongoDB are introduced, respectively.
MySQL - After you open the terminal, you can type in:
mysql -h cse-cmpsc431 -u <UserName> -p
to build a connection with MySQL database server, where <UserName> is your psu access id.
For example, assume your psu id is abc123, you would enter the following in the terminal:
mysql -h cse-cmpsc431 -u abc123 -p
and you would then be prompted to enter your mysql password.
The initial mysql password is your 9 digit psu ID numbers. - After you enter the password, you are connected to the MySQL server and see the prompt
‘>mysql’on your terminal. That means you successfully login in your own account in MySQL.
To change your password for the MySQL account, please enter:
set password = password(‘NewPassword’);
where NewPassword is your new password. - Under the command prompt‘>mysql’, to see the databases you can enter:
show databases;
to see the default database of your account. Note that each statement must end with a
semicolon(;). - To choose a database before any action, use the following command:
use database_name;
where database_name is the name of the database you want to use. - At last you can enter:
quit;
to log out your account. And try to log in your account again with your new password.
MongoDB
To use MongoDB, you need to use ssh to login to the host cse-cmpsc431. In other words, you
must be in the CSE network, such as in the Lab W204. - Your first step is to enter:
ssh <UserName>@cse-cmpsc431.cse.psu.edu
where <UserName> is your psu access id.
For example, assume your psu access id is abc123, you would enter the following in the
terminal:
ssh abc123@cse-cmpsc431.cse.psu.edu
Then enter your CSE password and log on the server cse-cmpsc431. - After that you will need to start the mongo shell as follows:
mongo <Intitial Mongo database> -u <MongoUserName> -p
where <Intitial Mongo database> is the name of default database which is the same with your
psu access id. And <MongoUserName> is your psu access id as well.
For example, assume your psu id is abc123, you would enter:
mongo abc123 -u abc123 -p
and then you should be prompted for your MongoDB password which is initially your 9 digit
psu ID numbers. - In order to change your Mongo Password, you will need to be in the initial database and enter
the following in the Mongo shell:
db.changeUserPassword(“MongoUserName”, “NewPassword”)
For example, you would enter:
db.changeUserPassword(“abc123”, “xyz1234”)
Note in MongoDB there is no‘;’at the end in each line. Now you are ready to use MongoDB.
Also note that the CSE Home Directories is not mounted on cse-cmpsc431 so when you log into
the MongoDB, you will see a failed write for a .mongorc.js which is typically created in your
home directory. If CSE Home Directories not be mounted on cse-cmpsc431 is a problem for
your work, please send an email to the TAs and CSE Helpdesk to let us know.