# Master in WWW SP24-BL-CSCI-A348-6388 - [syllubus link] - [2024 page, port on 11231](http://silo.cs.indiana.edu:11231/) - [2025 page, port on 56800](http://silo.cs.indiana.edu:56800/) 2025 mid-term --- some answers are here: [study guide](https://legacy.cs.indiana.edu/classes/a290-web/fall2019/studyGuideAnswers.html#tarragon) * What is HTTP? * Hyper Text Transfer Protocol * defines communication between web clients and web servers * e.g., sending HTTP Requests and receiving HTTP Responses * What is HTML? * Hyper Text Markup Language * a standard markup language for Web pages * HTML elements are represented by <> tags * e.g., `<a />` * What is XML? * eXtensible Markup Language * designed to store and transport data over the Internet * designed to be both human- and machine-readable. * What is CGI? * Common Gateway Interface * generally written in languages such as Perl, C, or shell scripts. * acts as a middleware, allowing web servers to interact with applications that process data and send back responses * e.g., web form, reload page and change photos * more about [cgi](https://legacy.cs.indiana.edu/classes/a348/spr2021/resources/cgi.pdf) * What is SQL? * Structured Query Language * standard language for accessing databases that consist of one or more tables * some important statement: create, insert, select, delete.. * Define: input, output, constant and state. * input: data from users, received by the system. * output: data generated by a system * constant: a value that never change * state: remember preceding events or user interactions; server-side state & client-side state * What is PHP? * short for "Hypertext Preprocessor" * open source scripting language for web development * scripts are executed on the server * What is Django? * Python-based web framework that runs on a web server * model–template–views architectural pattern * What is Laravel? * PHP framework for web development * model-view-controller architectural pattern * How is a framework different from a library? * framework: provide structure * library: not provide structure and design pattern; it provides reusable functions * What is inversion of control? * a design pattern in which the control of an object’s behavior is inverted or moved outside of the object. * [good article](https://hackernoon.com/beginners-guide-to-inversion-of-control) * How do you install Apache? * How did we install MariaDB? * What is the meaning of My in MySQL? * named after co-founder Monty Widenius's daughter, My. * How do start and stop Apache? * What is cron? What is crontab? * job scheduler on Unix-like operating systems * Crontab (CRON TABle) is a file which contains the schedule of cron entries to be run and at specified times * How did we set up a password protected folder in Apache? * What is a symbolic link? How do you create it? Where did we use those? * a short cut * ln -s {target file} {link file} * create code in the protected folder * How did we install PHP? * Write code to create a database in MySQL (as root). * Write code to create a user in MySQL (as root). * How do you give a user access to a database in MySQL (as root)? * Give example of a natural join from our exercise(s). * Give example of an outer (left) join from our exercise(s). * [SQL query homework](https://legacy.cs.indiana.edu/classes/a348/spr2022/hw05.html) * What effect has chmod u+x alpha have if alpha is a folder? * What effect does chmod u+x alpha have if alpha is a flat file? * What do these Unix commands do: du, man, ps, cat, tar, cp, ln, netstat? * What's in the log folder in Apache? * How do you determine if your (web, database) server is up? * What does this Unix command do: tail -f and how did we use it? * Displays real-time updates of a file, used for monitoring logs. * Write the simplest web script that keeps state (in the language of your choice). * What database system did we use with Django? * How do you keep state on the client side? * Cookies * Browser storage (localStorage, sessionStorage) * How do you keep state on the server side? * session, databases, or a plain file (Bob's auto order.txt) * Is there a difference between keeping state on client vs server side? * Can you run Python, Perl, PHP from the command line? * How do you determine if a port number is available before you start using it? * netstat -a | grep {a port} * How do you create a Unix archive? How do you unpack it? * tar -cvf * tar -xvf * What is rwxr-xr-- in binary? In octal? * What is 23 in base 2? What is 48 in base 8? What is 79 in base 16? * Do you need a dedicated port for Apache? For PHP? For Django? For MySQL? * not for php * Do you need a dedicated port for the database system used with Django? * When we installed PHP: what did we use httpd.conf for? * Same question for php.ini also what is a PHP session? * php.ini is generated by installation (configure, make, make install). * We can keep it anywhere, we choose apache/conf for that. * It tells PHP how to behave (path to session folder, ways to process input) * What are PHP superglobals? * Superglobals or autoglobals are special variables that works under their own scope rules inside and outside functions.The complete list of superglobals is: $GLOBALS $_SERVER $_GET $_POST $_COOKIE $_FILES $_ENV $_REQUEST $_SESSION * What is a variable variable in PHP? * [variable variables](https://stackoverflow.com/questions/25593055/variable-variables-in-php-what-is-their-purpose#:~:text=In%20PHP%20there's%20a%20functionality,as%20%24%7B%24name%7D%3D'Smith') What will be covered in the class: --- LAMP (Apache, http, html, CGI, perl, python, keeping states), DB, web framwork Command --- `ssh yishsieh@silo.cs.indiana.edu` **2025 update: [windows ssh with Putty](https://uisapp2.iu.edu/confluence-prd/display/SOICKB/Using+SSH+Key+Authentication+On+The+Unified+Linux+Systems#UsingSSHKeyAuthenticationOnTheUnifiedLinuxSystems-winscp) ps -ef | grep hsieh | grep nano `ps`: display information about currently running processes. `-ef`: display information about all processes in a full format, including details like the process ID (PID), terminal associated with the process, user, etc. netstat -a | grep {a port} ls -l `chmod` : change mode, command allows an administrator to set or modify a file's permissions. `history`: check the past commands `ls -ld`: show detailed information about the directory, including permission, owner, size, modification time, name, owner, and group `ls`: This is the command to list files and directories. `-l`: This option tells the command to provide a detailed listing, showing additional information about each file or directory. `-d`: This option is used to list the information for the directory itself, rather than its contents. `xvf` `x`: Extract files from an archive. `v`: Verbosely list the files processed. `f`: Use archive file specified (in this case, "whoa.tar"). Assignment notes --- 0109 notes - http host - server port - archive - install(Unix commands) issues discussed in the class --- Why run 'install' with a "./" in the path? --> if no './' in front of the file 'install', the system might install on the folder where it first looks on the path, and it might not find the file you want. -rw-r--r-- 1 :About permission (Time- 11:06) chmod 711 /u/{username} # drwx--x--x Why `apachectl start` will show permission denied? apachectl start ==> bin/apachectl start 0116 - class - Book - chapter 14 (CGI) - two scripts: - one changes when refreshing the page - the other store the state of each rendering) state : what changes and we need to remember input : something that comes from users, can't be anticipated output: complete control over, something your program produces constant: never changes, predictable, need to remember **HTTP is a stateless protocal** assignment 5 - (add/reduce math) perl, python - use on the server side LAMP stack - Linux, Apache, MySQL, Perl(Python, PHP) MEAN stack - MongoDB, Express(MVC framework for JS), Angular, Node.js Two ways of implementing math test script: - perl one (allow the server to execute) - ./one (chmod u+x one--> make sure your have execution permission) ***Homework: write a Hi program by python/ perl [syllubus link]: https://legacy.cs.indiana.edu/~dgerman/2024/syllabi/spring/a348.pdf <h3>0118 notes</h3> - homework 2 restart server manually under the folder `apache`, run `./bin/apachectl. start` cgi - python - start with `content:text/html` (html will destruct the cgi (robot face)) - https://docs.python.org/3/library/cgi.html - create a `conv` folder, [use dgerman's script](https://github.com/c212/spr2022-a348-dgerman/blob/main/lectures/lecture-07-feb-01/conv) to clean two scripts - run display.pl or post.pl first? - run the silo.cs.indiana.edu:{port}/cgi-bin/display.pl - create a link in our own website Sub in Perol is Function e.g.,`sub xxxx { xxx }` <h2>lab02</h2> 0119 * states upload source code --> phps (currently: upload source code on a github opened by professor) <h2>week03</h2> * install relational database server (RDBMS) * [mySQL tutorial](https://legacy.cs.indiana.edu/classes/a348/spr2022/lab04.html) RDBMS --> should have a port 212xxx 112xxx --> 212xxx (yishan: 11231--> 21231) edit conf `ls -a` show all files `ps -ef` * create start server script and `chmod u+x` * change the path in start server `ps -ef | grep xxx` check whehter mySQL is running enter mariaDB show username create a user (like `whoever`) : create a general user for every database, so you won't delete something accidentally create a script to stop the server `bin/mysqladmin --defaults-file=/nobackup/dgerman/my-database-server/.my.cnf shutdown` start mySQL server >1. `cd /nobackup/yishsieh/a348-spring-2024-workspace/my-database-server/mysql` >2. `./start-server` once you install mariabDB, you will see: ``` yishsieh@silo:/nobackup/yishsieh/a348-spring-2025-workspace/my-database-server/mysql$ ./scripts/mysql_install_db Installing MariaDB/MySQL system tables in './data' ... OK To start mysqld at boot time you have to copy support-files/mysql.server to the right place for your system Two all-privilege accounts were created. One is root@localhost, it has no password, but you need to be system 'root' user to connect. Use, for example, sudo mysql The second is yishsieh@localhost, it has no password either, but you need to be the system 'yishsieh' user to connect. After connecting you can set the password, if you would need to be able to connect as any of these users with a password and without sudo See the MariaDB Knowledgebase at https://mariadb.com/kb or the MySQL manual for more instructions. You can start the MariaDB daemon with: cd '.' ; ./bin/mysqld_safe --datadir='./data' You can test the MariaDB daemon with mysql-test-run.pl cd './mysql-test' ; perl mysql-test-run.pl Please report any problems at https://mariadb.org/jira The latest information about MariaDB is available at https://mariadb.org/. You can find additional information about the MySQL part at: https://dev.mysql.com Considering MariaDB's strong and vibrant community: https://mariadb.org/get-involved/ ``` 0125 week 03-2 --- * upload h1 source code * hw- lab 02 questions For midterm -->understand the install instructions and steps 12:12 recording > unpack Apache/mySQL/Php, go inside to do stuff >> Php is built into Apache as a separate module. MySql.. I use a binary implementation of it and I just set it up. php config: ``` make clean ./configure \ --with-apxs2=/nobackup/araje/stuart-dgerman/apache/bin/apxs \ --with-pdo-mysql --with-xml --enable-track-vars --with-mysqli \ --prefix=/nobackup/araje/stuart-dgerman/apache \ --with-config-file-path=/nobackup/araje/stuart-dgerman/apache/conf make make install ``` add two lines into conf: ``` AddType application/x-httpd-php .php .phtml AddType application/x-httpd-php-source .phps ``` 12:26 professor gave a summary of installing php >1.Go to a place where I brought all Php archive and unpack it. >2.Go inside and build php with `install`script >3.create ini file >4.add 2 lines in httpd.conf, to indicate server you got stuff now, so plz act properly. >5.`mkdir ../phpsessions` : all sessions are placed, so users won't get random ID from TMP each time.If the ID is shared, it might crash with something another server does. ``` 584 nano -w httpd.conf *addtype 585 mkdir ../phpsessions 586 nano -w php.ini ** add session (12:30) 587 ls -ld /nobackup/dgerman/fall-2022-a290-web/apache/phpsessions ``` php files are placed on the httpdocs - five php files - https://legacy.cs.indiana.edu/classes/a348/spr2023/lab03.html - last.php: 1) change the sql port 2)add sql commends to get data 0126 lab --- one.php `<?php phpinfo(); ?>` `phpinfo()`: a funciton showing php configuration Difference between two.php & three.php > three.php kept sessions.=> The data is kept on the web, even though they're rendered from different page. HW-03 --- https://legacy.cs.indiana.edu/classes/a348/spr2023/hw03.html fifth query: https://legacy.cs.indiana.edu/classes/a348/spr2023/whatsnew.html#deacon 0130 course --- - summarize for what we have done - [css + html book](https://legacy.cs.indiana.edu/classes/a348/spr2024/books/Web_Design_Playground_Second_Edition.pdf) - - `method='post'` data will be saved inside, the url won't show `action` **learn php (a book!)** - Finish [hw 4- bob's auto](https://legacy.cs.indiana.edu/classes/a348/spr2023/hw04.html) with first. Go throught the code with python first. - Professor will find 7th edition of php book - [php and mySQL book-5th edition](https://legacy.cs.indiana.edu/classes/a348/spr2021/resources/wellig-fifth.pdf): To chapter 7, then you will have a bob's auto - [php crash course:(hw 06)](https://legacy.cs.indiana.edu/classes/a348/spr2021/fe01.html) hw-04 --- 1. create a index.html in /htdocs 2. create a python file in /cgi-bin 3. chmod u+x(744) to the python file. 4. Remember to edit the python file. (Recording 12:13~15) ``` #!/usr/bin/python from time import gmtime, strftime import cgitb, cgi cgitb.enable() print "Content-type: text/html\n\n", form = cgi.FieldStorage() u = form.getvalue("uku") h = form.getvalue("hbr") a = form.getvalue("app") address = form.getvalue("add") print """ Your order contains: <ul> <li> %s ukuleles <li> %s hair brushes <li> %s apples </ul> <p> Your order will be shipped to %s """ % ( u, h, a, address) d = strftime("%a, %d %b %Y %H:%M:%S +0000", gmtime()) line = " %s %s %s %s %s \n" % (u, h, a, address, d) print "<hr>(%s)<hr>" % line with open("/u/akbranam/a290-workspace/apache/htdocs/hwThree/orders.txt", "a") as myfile: myfile.write(line) ``` 5. create order.txt (why the time is 17:00, since it's GMT) 6. you will see records on order.txt **Understand what processorder.php is doing. Lab04 hangman --- ![image](https://hackmd.io/_uploads/H1asoKq5p.png) The main issue in preserving state information is *where to store* it. [Storing data: reference](https://legacy.cs.indiana.edu/classes/a290-web/fall2019/stein02.html) ## Client-side technique ## It works well if user sessions is *independent* of the others. 1. Store state in hidden fields - session id can be saved in a hash table keyed by session ID 2. Store state in cookies - HTTP cookies are transmitted between the server and the browser within the HTTP header. - Set-Cookie field in the HTTP header. - stashes away the cookie information in a small in-memory - Next time the browser makes a request from that particular server, it returns that cookie in a Cookie field - **more classic** - **Benefit: maintaining state across browser sessions** - **Risks**: However, after the user quits the browsing session, the cookie is written out to disk. Determined cheaters *could still find and edit the cookie database file*. - **Solution**: **MAC(Message Authentication Checks)** - MD (message digests) is the most reliable a class of algorithms. - MD changes a large amount of data into a complex series number, called *hash*. - MD5 produces a 128-bit hash - In a MD method, users can't modify state information, but they can see what's there. But in the hangman game, we don't want users to see the to-be-guessed words. Encrption can be conbined with a MAC by combining the code like `Crypt::CBC`Perl module. 3. Store state in the URI ## Server-side technique ## Server-side storage allows you to have a *full access to the list of all users and what they've done, or what they're doing.* **Downside**: each user sessions **consumes a shared resource.** 4. Store state in web server process memory - Apache allows persistence across multiple accesses, we can store small amounts of states info in the main memory. - Each user session is stored in a hash table keyed by session ID. - Application sends the session ID back to the user in the form of a cookie, a hidden field, or a component of a URI. - When the same user connects again, your application recovers the session ID and retrieves the state information from its data structure. - Suitable for: **small amounts of state information** for relatively **short periods of time**. 6. Store state in a file 8. Store state in a database - The DBI library is a generic Perl interface to RDBMS that speaks SQL. **Hangman in python (/cgi-bin/hw04/three) - add `cgitb`, `cgitb.enable()` - 0206 hw05 --- Learn Javascript Book: https://legacy.cs.indiana.edu/classes/a290-web/fall2023/lab05.html (includingi Ajax,) Eloquent Javascript: https://eloquentjavascript.net/ protected folder --- https://legacy.cs.indiana.edu/classes/a348/spr2021/lab02.html Recording 12:35 1. mkdir protected (under /htdocs) 2. add configures in htdocs.conf ``` <Directory /u/gaoyu/a348-spring-2021-workspace/apache/htdocs/protected> AuthName Protected AuthType Basic AuthUserFile /u/gaoyu/a348-spring-2021-workspace/apache/passwd <Limit GET POST> require user dgerman require user gaoyu </Limit> </Directory> ``` 3. Add password `-bc {username} {password}` * `-bc` means create a file if there is no. 5. The password is encrypted and saved in a file 6. Restart the apache 0208- how to automatically restart apache? recording at 12:00 - .pid means the apache is in process (running) ![image](https://hackmd.io/_uploads/HJEq7nwoa.png) - look for apache process ![image](https://hackmd.io/_uploads/rkunPFGjT.png) - `crontab -e` and add the time & action you want to do perioridcally - `tail -f error_log` 0209 lab --- lab05: read chapter 26 in the [book](https://legacy.cs.indiana.edu/classes/a348/spr2021/resources/robinsnest.pdf) 0213 class --- homework 5 : personal page track time & show time explaination The code should be provided by a protected file [Lab 06](https://legacy.cs.indiana.edu/classes/a348/spr2023/lab05.html) - work with PHP session - two - three Djangle setting up, [reference](https://legacy.cs.indiana.edu/classes/a290-web/fall2023/resources/matthes.pdf) - 12:30~45, the professor created a new env called Spongebob - You can have several virtual environment - But in the newly created env, aka, spongebob, you cannot use django since it's new. 0215 (django) --- book: [2nd edition](https://legacy.cs.indiana.edu/classes/a290-web/fall2023/resources/matthes.pdf) learning_log project: [course reference](https://legacy.cs.indiana.edu/classes/a290-web/fall2023/project02.html ) * install with hte new virtual env by django 2.2.0 * outside the Spongebob, we have python3.8, django 2,2,12 * Inside the Spongebob, we have python but no django, since we haven't installed. 1. Get into the virtual environment: `source /nobackup/yishsieh/a348-spring-2024-workspace/django-projects/environments/ocean/bin/activate` 2. `deactivate` --> to exit from a virtual environment 3. create a project in `~django-project/applications` `django-admin `, create a folder called` learning_log` 4. show the content of the folder`tree learning_log` 5. run `python manage.py migrate` under `applications` ==> you will get three things, including sqlite3 ``` (ocean) yishsieh@silo:/nobackup/yishsieh/a348-spring-2024-workspace/django-projects/applications/learning_log$ python manage.py migrate Operations to perform: Apply all migrations: admin, auth, contenttypes, sessions Running migrations: Applying contenttypes.0001_initial... OK Applying auth.0001_initial... OK Applying admin.0001_initial... OK Applying admin.0002_logentry_remove_auto_add... OK Applying admin.0003_logentry_add_action_flag_choices... OK Applying contenttypes.0002_remove_content_type_name... OK Applying auth.0002_alter_permission_name_max_length... OK Applying auth.0003_alter_user_email_max_length... OK Applying auth.0004_alter_user_username_opts... OK Applying auth.0005_alter_user_last_login_null... OK Applying auth.0006_require_contenttypes_0002... OK Applying auth.0007_alter_validators_add_error_messages... OK Applying auth.0008_alter_user_username_max_length... OK Applying auth.0009_alter_user_last_name_max_length... OK Applying auth.0010_alter_group_name_max_length... OK Applying auth.0011_update_proxy_permissions... OK Applying sessions.0001_initial... OK ``` 5. Enter database by running `sqlite3` `sqlite3 db.sqlite3` 6. exist sqlite in a virtual env by running `.exit` 7. check port is available `netstat -a | grep 31231` 8. edit `setting.py`, modify ALLOWED_HOSTS ['silo.cs.indiana.edu'] 9. enter the right folder: `cd /nobackup/yishsieh/a348-spring-2024-workspace/django-projects/applications/lab06/pcc_2e-master/chapter_19/allowing_users_to_own_their_data` 10. run `python manage.py runserver silo.cs.indiana.edu:31231` to start the django website 10. find previous command: `history | grep manage` 0216 lab --- lab05 matthes's book pcc link: https://ehmatthes.github.io/pcc/ sql command: `CREATE USER 'username' IDENTIFIED BY 'password';` `ln -s setting.php setting.phps` : build up 0223 homework 7 --- Start from hw06 * Problem to solve: when two programs share the same session, how to avoid variables are shared by running namespace. * To view what's inside a session: `cat session_hfkdshkflsdofjspdfj` book: [python 3rd](https://legacy.cs.indiana.edu/classes/a348/spr2023/PythonCrashCourse3E.pdf) * this is code version2, but django 4.1.* cd `/nobackup/yishsieh/a348-spring-2024-workspace/django-projects/applications/hw07/learning_log2/pcc_2e-master/chapter_19/allowing_users_to_own_their_data` run `python manage.py runserver silo.cs.indiana.edu:31231` * this is code version 3, cloned from https://github.com/ehmatthes/pcc_3e/tree/main * Remember to explain the difference Midterm preparation (March 7) --- https://legacy.cs.indiana.edu/classes/a290-web/fall2019/studyGuideAnswers.html#tarragon test: https://legacy.cs.indiana.edu/classes/a348/spr2024/midterm.html - * use perl/php/python to access database 1. [The book-chapter8](https://legacy.cs.indiana.edu/classes/a348/spr2021/resources/cgi.pdf) for midterm (chapter 8 is the same as the hw02-cgi form) * Practice on the course http://silo.cs.indiana.edu:11231/cgi-bin/chap8/feedback-form * we can add a checkbox for "add me a copy" 2. Query 2(perl), 4(python), 5(php) * query 5: ``` MariaDB [whatever]> select username, lastName, firstName, avg(rating) as score from performers, ratings where performers.username = ratings.player group by username having score >= (select avg(rating) from ratings); ``` So you could do: - Query 1(->2) embedded in CGI Perl - [perl script reference](https://www.easysoft.com/developer/languages/perl/tutorial_data_web.html) - Query 2(->4) embedded in a CGI script written in Python - - Query 3(->5) embedded in a PHP script --> [last.phps](https://legacy.cs.indiana.edu/classes/a348/spr2023/lab03last.html) --> [last.php](http://silo.cs.indiana.edu:11231/last.php) Upload your code on Github and protected folder 0307, 0308 course --- [node js statements](https://legacy.cs.indiana.edu/classes/a290-js/fall2023/week01.html) node >Infinity + 3 #Infinity >Infinity - Infinity #NaN >0/0 #NaN (not a number) >typeof NaN #Number >typeof undefined #undefined >typeof null #object >8 * null #0 >"5"-1 #4 >"5"+1 #51 >"couch" * 2 #NaN >false == 0 #true >false + 1 # >null + 1 >null == undefined #true >null `||` "user" #user >"tomato" `||` "pasta" #tomato >"tomato" && "pasta" #pasta [JS textbook](https://legacy.cs.indiana.edu/classes/a290-js/fall2020/resources/4ed7g56t3.pdf) Chapter 8 : homework [Eloquent Javascript](https://eloquentjavascript.net/) [2023 js materials resource](https://legacy.cs.indiana.edu/classes/a290-js/fall2023/whatsdue.html) [html & js Dgerman's instruction in 2008](https://legacy.cs.indiana.edu/classes/a348/fall2008/whatsnew/1114.html) Lab08 --- Set up a minimal [HTTP node server](https://legacy.cs.indiana.edu/classes/a290-js/fall2023/week02.html) and demonstrate it. - use '31231' for node js - `node five.js` start the server hangman & blackjack --- [Get Programming with Javascript Next by JD Isaacks](https://legacy.cs.indiana.edu/classes/a290-js/fall2020/resources/4wb8v57.pdf) Lab 09 --- Unit 01 from [Wexler](https://legacy.cs.indiana.edu/classes/a290-js/fall2020/resources/xevyu457cf6.pdf) --> There is a capstone (for term project) 0326 (alternative project - Task list)-HW09 --- Angular + MongoDB question link: http://silo.cs.indiana.edu:31415/a290-js/fall2023/alternative-project/ port: 41231 (for mongodb) service: 31231 **Steps of running the application:** 1. under /mean: `export PATH=/l/www/classes/a290-js/fall2023/software/local-6.14.3/bin:$PATH` 2. `which node`, `node -v` Make sure the node version is 6. 3. under /mean: `numactl --interleave=all mongod --bind_ip silo.cs.indiana.edu --port 41231 --dbpath documnets &` start mongodb, remember to change the port of mongodb 4. under /http: `npm start` 5. open http://silo.cs.indiana.edu:31231/ **Run `export PATH=/usr/bin:$PATH` to downgrade node back to version 10** **How to see data from database?** - reference: http://silo.cs.indiana.edu:31415/a290-web/fall2016/0929a.phps `-bash-4.2$ mongo silo.cs.indiana.edu:41231` MongoDB shell version: 2.6.12 connecting to: silo.cs.indiana.edu:29999/test > show dbs admin (empty) cricket (empty) local 0.078GB > use cricket switched to db cricket > show collections > var a = db.getCollection("tasks") > a cricket.tasks > a.find() > a.insert( { "text" : "Watch the presidential debate tonight." } ); WriteResult({ "nInserted" : 1 }) > a.find() { "_id" : ObjectId("57ec9b54e51462eb0a2ab5c5"), "text" : "Watch the presidential debate tonight." } > a.insert( { "text" : "Find out who Bernie Sandwiches was." } ); WriteResult({ "nInserted" : 1 }) > a.find() { "_id" : ObjectId("57ec9b54e51462eb0a2ab5c5"), "text" : "Watch the presidential debate tonight." } { "_id" : ObjectId("57ec9bd4e51462eb0a2ab5c6"), "text" : "Find out who Bernie Sandwiches was." } > 0328 --- Angular W3 school tutorial: https://www.w3schools.com/angular/ [Eloquent Javascript] - Chapter 15 Handling events (https://eloquentjavascript.net/) Final exam: - Question from Dgerman (from W3school Node.js) - MongoDB - https://www.mongodb.com/mean-stack 0329 -LAB --- Wexler Unit 1_lesson 4 -change main.js connection port to 31231 -add extra words in main.js -run `node main.js` *note: remember to 'npm install' to update the nodeJS module. 0402 - CONFETTI CUISINE (Lab09) --- class on recording Activate the website example in Wexler's book /nobackup/yishsieh/a348-spring-2024-workspace/wexler/get-programming-with-nodejs-master/unit_1/lesson_7_capstone/finish/confetti_cuisine `node main.js` 0404 --- The Thursday class is cancelled, so I nee see if you can make programs described in Lesson 12, 16 work. Simon and Sally's exercise. Homework 10 (cuisine) --- **Unit 2/ lesson 12**: * Building custom routes and application logic has become a tedious task, so I’m converting my application to use Express.js. * to use `npm start` instead of `node xxx.js`, add ``"start": "node main.js"`` to "scripts" in package.json * add dependency in package.json (ejs) * add body parser (p.156) * add more routes and callback functions in homecontroller * add ejs pages **unit 3/ lesson 16**: * save the subscription data * change mongoose connection port in main.js * define subscriber schema(email, name, zipcode) in models/subscriber.js * add subscriber.ejs, listing all subscribers * add a new route- subscriberController.js in main.js (to show all subscribers) * ~/subscribers => show all subscribers * before `npm start`, activate mongoDB by running `numactl --interleave=all mongod --bind_ip silo.cs.indiana.edu --port 41231 --dbpath documnets &` under ~/alt-prj/mean 0411 --- How to connect db from a far away machine? * Under alt-prj/mean, run`telnet silo.cs.indiana.edu 41231` * POST /api/tasks ==> mine will disconnect Lab-10 --- Questions: 1. add a new user and log in 2. add courses 3. add subscribers **Unit_4/lesson 21** * add CRUD models to confetti cuisine * subscribers to pick the courses they’re most interested in attending. Then, if a subscriber later creates a user account, the business wants those two accounts to be linked. * subscriber model (subscriber.js) * course model (course.js): subscribers can select the courses they are interested in. * user mode (user.js): adjust user schema, and add a virtual attribue that returns user's name, and pre('save')hook that connects subscriber and user with the same email address. * create views- under /subscribers and /users, there are index.ejs, new.ejs, show.ejs, and edit.ejs, which corresponds to CRUD. * add CRUD routes to main.js, also update the navigation link to the /subscribers/new instead of /contact. * create controllers for subscribers, course, and users. In each controller, it defines CRUD actions. **Unit_5/lesson 25** * adding user authentication * add Passport.js for a secure user-login process * install packages `npm i express-session cookie-parser connect-flash express-validator passport passport-local-mongoose -S` * add login for to users/login.ejs * add layout.ejs to show login status Homework 11 --- **unit 6/Lesson 26** p.304 Change the res.render("courses/index") line in the indexView action of coursesController.js to res.json(res.locals.courses). When you restart your application and visit http:// locatlhost:3000/courses, your browser should display all the courses in your database in JSON format **unit 6/Lesson 29** * create teh client-side JS code to request for course data. * By Ajax asynchronous call to my server:load the course data until the user clicks a button to enroll * add courses partial (_coursesModal.ejs) --> The underscore distinguishes the names of partials from regular views. * Creating an Ajax function to retrieve course data in confettiCuisine.js * create two new API endpoints. One endpoint retrieves course data as JSON; the other handles my requests to enroll users at /api/course/${courseId}/join. --> create apiRoutes.js * add coursesController.js * Users can join courses after logging in. how to use REPL to populate data? **unit 7/Lesson 33** * add chatbot * install socket by running `npm i socket.io -S` * how does the code do for joining courses under a certain user's account? Lab-11 --- QA from Dgerman, the question is from Apendix D https://legacy.cs.indiana.edu/~dgerman/a290-js/spr2019/lab06.pdf * To run edition 4, we shoule upgrade Node. - `echo 'export PATH=/l/www/classes/a290-js/fall2022/software/node-v16.13.0/bin:$PATH' >> ~/.bashrc` - `source ~/.bashrc` - Then run `node skillsharing.mjs` Term project ---- Github: https://github.com/cliveharber/gettingMean-2 MEAN 2nd Edition: https://legacy.cs.indiana.edu/classes/a348/spr2024/books/mean-holmes-2019.pdf MEAN - APPENDIX D https://manning-content.s3.amazonaws.com/download/9/3219da5-698b-4dde-b534-e8ebb44df70a/bonus_AppD_Holmes_MEAN_November13.pdf Other key concept: --- REPL stands for "Read-Eval-Print Loop." It's an interactive programming environment that takes single user inputs, evaluates them, and returns the result to the user. The user can type expressions (read), have them executed by the system (eval), and then see the results (print), all in a continuous loop (loop). Take-home exam: --- chapter 3: when access auth in mongodb shell, make sure to run `db.getCollection('auth').find({})`