ข้ามไปที่เนื้อหาหลัก

Web Class note

https://github.com/omiejung01/Nuxt3WD2_2023/tree/master02


https://docs.google.com/document/d/1qikYS-WSpRosjIlUZEoOhzguigWx2-Mqamfyxcs67aE/edit


Web Design

https://drive.google.com/drive/folders/1kJvORymDwvcDtGoliUOHifsza3CdWsmH


DBM Course

https://drive.google.com/drive/folders/119ZWerKRLYNwf7G7dEA7ZKcBx9rOQoqV


Web Design - Class note


13 Nov 2023

  • Course Syllabus


Please go to

https://tinyurl.com/webdesign002


And go to slides at 

https://tinyurl.com/dbmcourse001


Slide: 01-How computer works


Slide: 02-Programming Languages


Slide #11:


Try "Create game using PHP"


Change PHP to C++


Change PHP to Unity


Let's student try some queries


<Solution> + <Languages Tools>


Answer in “Student Interactive Board” Google Doc for your ATTN



Todo:


Check Visual Studio Code in your machine

Goto Search Box type → VS Code


Create new file

  • Save file as hello.html


Hello World in HTML

Hello World in JavaScript


Next Class - Slide: 03-Coding 101



Class: 20 Nov 2023

Slide: 03-Coding 101


Slide #19

Break: 10:10 → 10:25


Slide: 04-Basic command prompt


#4 Open Command Prompt


Click the Program Search in a lower-right corner

Type “CMD” → enter


Open VS Code

Click the Program Search in a lower-right corner

Type “vscode” → Enter


  • Create new file “hello.html” in the Desktop

  • Type the content of the file and save

  • Check the file in the Desktop

  • Close the VS Code


>cd Desktop

>dir


>cd \

>dir 

(Observe the directory name)


Try go to non-existing directory

>cd Desktop

(Error message)


>cd Users

>dir

(Looking for your username SC505 - LAB class)

>cd SC505

>cd Desktop

>dir

(Looking for hello.html)


Try full location

>cd \

>cd C:\Users\SC505\Desktop


Now, Make sure that you are in Desktop, create new directory


>md MyCode


Copy the hello.html to MyCode\hello.html


>copy hello.html MyCode\hello.html


Now, you will have the hello.html in “MyCode” directory


Delete hello.html in “MyCode”


>del MyCode\hello.html


Move the hello.html to MyCode directory with the “hello2.html” name

>move hello.html MyCode\hello2.html


>cd MyCode

>ren hello2.html hello3.html


Now you have “hello3.html” in “MyCode” folder


Close the Command Prompt window


>exit


Finish, Command Prompt topic


Next Class: 05-Git for Classroom - JavaScript


Class: 27 Nov 2023

Instructions

  1. Goto github.com

  2. Please use personal email

  3. Register and prepare username and password

  4. Sign in


Terms

  • Repository: Folder on github

  • (Best practice: Use the same name with our machine’s folder)

  • Checkout: action to prepare your code to push/pull


Slide: 05 Git for classroom

Check the git in the machine


>git


The computer will show the git command instruction manual.

If not, download git from:


https://git-scm.com/download/win 


Go to Desktop folder

>cd Desktop


Repo: TestGit08


Create folder

>md TestGit08


>cd TestGit08


>md catalog


Run Visual Studio code

>code catalog


(You can try closing the command prompt and visual studio and open ‘catalog’ folder again


In VS Code


Click icon ‘New File’ to add file “index.html”


<html>

<body>

Hello World

</body>

</html>


Save the file


Try using “Google Chrome” to open “index.html”


Create new Google Docs (or MS-Word online) to note your git command


Now, Goto Github


Create new repo “TestGit08” with MIT License and Readme File

  • Description “This is for the web design” classroom

  • Set to Public

  • Click “Create Repository”


Now, you can put “Student ID and Name” in the Readme file and commit the change.


Slide #13 Create token and copy it to your note


Copy initial script (4 git commands) Slide #14 to your note, Change it to your name and email


Copy other 4 git commands (Slide #15) to your note, update the token and username


Back to command prompt

Make sure that you are in the “TestGit08” directory


…. TestGit08>


Run 8 git commands (git init to git push)

You should see your code in github


Break: 10:30 - 10:50


Go to Slide #17

Update your index.html


Update your git commands


Then, run git commands again (only last four, git add → git push)


Go to github and check your master02 branch


Homework:

Go to different machine (Maybe other machine in your place)

Try to pull the code to your new machine #16 to #23



Slide: 06-JavaScript essential 01



Website → Collection of the web pages


Web page is HTML → WWW


Finish at #7


Next class Architecture before coding



Class: 4 Dec 2023


After the break, we will try git pull, therefore, please make sure that you have the “TestGit08” in your repository on GitHub with “Hello World” web


https://github.com/omiejung01/TestGit08/tree/master02


Slide: 07-Web Architecture


Break: 10:30 - 10:50


Prepare your git command script

In git pull command, make sure that the branch is the latest branch (master02)


Type cmd in Windows search → Enter


>cd Desktop


Create Repo Folder ‘TestGit08’ on Desktop

Create ‘catalog’ folder inside ‘TestGit08’ 


>md TestGit08

>cd TestGit08

>md catalog


Make sure that your current directory in ‘TestGit08’ not ‘catalog’


Run git init 4 commands (from git init to git config)


Run git pull 3 commands (from git add to git pull)


Now, you should see the index.html in your ‘catalog’ folder


>code catalog


Slide: 06-JavaScript Essential 01


Copy the code in slide #4 to your index.html

Save and Use Google Chrome to Open it


Now, you can try JavaScript code


var m = 10; // 1 to 10

for (i = 1; i <= m; i++) {

    document.writeln(i);

}


Save the file and run, prepare to push the branch ‘master03’


Make sure that your current directory is ‘TestGit08’


Change the git push script to master03 and message “Try - for loop”


Run 4 git push commands (git add until git push)


Check your github.com page


Go to Web Design Student Interactive Board and put this information for your ATTN checking.


<Dhirachat Ch>

<ID XXX-XXXX>

https://github.com/omiejung01/TestGit08/tree/master03


Next Class: Slide: 06-JavaScript Essential 01 #9

When you attend the class, prepare the source code from the latest class by using git pull.


Class 18 Dec 2023


  • Git pull

  • Continue JavaScript Essentials 01


Break: 10:17 - 10:30


Midterm examination

4 questions

Create 2 static pages (In class - today)

Create 2 pages from the given topics (Similar to assignment - Video tutorials)






https://github.com/omiejung01/MyNuxtLesson/


Teacher Github: MyNuxtLesson


1. Create Nuxt Project (my-nuxt)


– Click ‘Windows’ button and run ‘cmd’ command


>cd Desktop (-- Use your own folder)



>npm install npm -g


>npx nuxi init my-nuxt

Answer y 

Select npm

Answer no (Git initialization)


>cd my-nuxt


>npm install


>cd ..

>code my-nuxt


>cd my-nuxt


Try edit source code 'app.vue'


<div>

//

Hello World

</div>





To run a program


>npm run dev -- -o


Now you should see a web program




Create “pages” folder in my-nuxt



Create about.vue in “pages”


Create index.vue in “pages”


Delete “app.vue”




(VS Code) goto Extensions →  install Vue VSCode Snippets


Edit – index.vue –


Type “vbase”, the program will popup the choices

Choose “Vbase-3-ts-setup”


Then index.vue become Home page


Use code in

https://github.com/omiejung01/MyNuxtLesson/


Copy only template and style section



– index.vue —

(GitHub–master01)


– about.vue –

(GitHub–master01)


Go back to command prompt


You may need to restart server

→ Ctrl-C → Y

Run server again

>npm run dev -- -o


Goto

http://localhost:3000/about



Next 


“https://nuxt.com/modules” find Tailwind CSS


https://nuxt.com/modules/tailwindcss


Stop running the web site


Ctrl-C → Y

>npm install --save-dev @nuxtjs/tailwindcss


Then edit “nuxt.config.ts” to be:


export default defineNuxtConfig({

  devtools: { enabled: true },

  modules: [

    '@nuxtjs/tailwindcss'

  ]

})


Now goto github branch “master06”


In “my-nuxt” folder, create “layouts” folder


Create “default.vue” in “layouts” folder


Type “vbase3”


Choose vbase3-ts-setup


Copy the source code from branch master06 “layouts/default.vue” on template and style section


Start web server again

>npm run dev -- -o


Now you finish your first web already

Open-book policy midterm 2/2023 


  1. You cannot use screen capture or video tutorials 

  2. You cannot use Artificial Intelligence services like Open AI, Bard 

  3. You cannot use non-English online resources 

  4. You cannot perform any communication (online/offline) 

  5. You cannot use other electronic devices (Smart phone, Tablet, Smart Watch) 

  6. You can use offline note/textbook (no borrowing) 




Resources for Midterm examination 2.2023


VDO

Recap Midterm 2/2023


https://youtu.be/FEeEagIygrc


Create Web Page with Nuxt 3 (18 Dec 2023) - Part 1

https://youtu.be/POk1eSO2UT0


Create Web Page with Nuxt 3 (18 Dec 2023) - Part 2

https://youtu.be/3QCkgxbV6Kg


Wireframe - Grid + Tailwind CSS (Make-up class)

https://youtu.be/WGZMGsd_r1Q


Create a web page from requirements (Make-up class)

https://youtu.be/XJWJtC8Sm-Y


Slide: 

Recap

https://docs.google.com/presentation/d/1U_gLWOd6Xnr0Sw6cbeyPMlDQEoyDEnClVKQ8mLlQEgs/


Midterm preparation:

https://docs.google.com/presentation/d/1XcgAPs9ZCak5MEX8y3Vkb0osR59kfLIh5yO3d9CKCbw


Github:

https://github.com/omiejung01/Nuxt3WD2_2023/tree/master01


Other resources:

Web Design

https://drive.google.com/drive/folders/1kJvORymDwvcDtGoliUOHifsza3CdWsmH


DBM Course

https://drive.google.com/drive/folders/119ZWerKRLYNwf7G7dEA7ZKcBx9rOQoqV


ความคิดเห็น

แสดงความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

OOPT01

 Lists: Lists are ordered collections that can contain elements of different types. They are mutable, meaning you can change their elements. Example: python Copy code my_list = [1, 2, "apple", True] my_list.append(5)  # Adding an element print(my_list[2])  # Accessing an element by index my_list.remove("apple")  # Removing an element print(my_list)  # Printing the modified list Dictionary: Dictionaries are unordered collections of key-value pairs. They use keys to access their associated values and are mutable. Example: python Copy code my_dict = {"name": "Alice", "age": 25, "city": "New York"} print(my_dict["age"])  # Accessing value by key my_dict["occupation"] = "Engineer"  # Adding a new key-value pair del my_dict["city"]  # Deleting a key-value pair print(my_dict)  # Printing the modified dictionary Ranges: Ranges are sequences of numbers used for iterating over a sequence...
แสดงความคิดเห็น
อ่านเพิ่มเติม

Object Final

 Final Examination OBJECT You will be given the "project name" and django project name. Inheritance 1 question Polymorphism 1 question (main.py) Django database 1 question Rest API → List items 1 question Rest API → Item detail 1 question Rest API → Transaction 1 question (Wallet App) ----------------------------------------------------------------------------------------------------------------------------- pip install django django-admin startproject mysite_project py manage.py startapp catalog_app  Create the database models in terminal py manage.py makemigrations py manage.py migrate py manage.py createsuperuser Rest API pip install djangorestframework pip install markdown       pip install django-filter pip install virtualenv --------------------------------------------------------------------------------------------------------------------------- พยายามติดตั้ง  py manage.py makemigrations py manage.py migrate ทุกครั้งหลังจาก เปลี่ยนรูปแบบโค้ด ตัว...
แสดงความคิดเห็น
อ่านเพิ่มเติม

OPPTH

 https://github.com/kongruksiamza/python-oop
แสดงความคิดเห็น
อ่านเพิ่มเติม