Web Design Workshop

1. Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system www.redbugbblle.com

2. About git If you had this workshop once already, then you had an introduction to git. Bear with us. If you DIDN'T, then you may have experienced the concept but not the working system. So you gotta learn how to use it now. We're serious. en.wikipedia.org

3. GITtin' it on with git: Step 0: Set up MAMP or WAMP (Local Apache development environment) If you don't know how, a) ask your team mates or b) ask your lab instructor.

4. Step 1: Install GIT, from git-scm.com Do this before your lab, if possible. If you don't have a laptop, we will TRY to use the lab's computers ... and your home desktop machine. But it's much more tedious.

5. Step 2: Become a habitual user of GIT WHY? Because a significant number of web design AND game design firms are now using this Version Control System Several competing logos are in circulation . and who's that brown dude eating trees?

6. Step 3: ( Look-Ahead) Learn how to use smartGit, a GUI client (next week) WHY? It has a better graphical display than ‘bare git’. But we want you to understand the command line interface first. Step 4: (Look-Ahead) Learn how to use bitbucket, an online shared git repository. (3 weeks away)

7. Where to get started? This is the best tutorial/explanation That I’ve found – and it’s free! http://progit.org/book/ A repository is (similar to) a database that remembers all the previous versions of all the files in a project.

8. Where to get started? This is the best tutorial/explanation That I’ve found – and it’s free! http://progit.org/book/ A repository is (similar to) a database that remembers all the previous versions of all the files in a project. It can 'remind' you of the changes you made. It can show you the lines of code that were changed.

9. Where to get started? This is the best tutorial/explanation That I’ve found – and it’s free! http://progit.org/book/ A repository is (similar to) a database that remembers all the previous versions of all the files in a project. It can 'remind' you of the changes you made. It can show you the lines of code that were changed. Most importantly, it can organize a team's work so that you don't destroy each others' work.

10. The Team model, with a central repository (old way of doing it)

11. The Distributed model, with local repositories

12. Our "beginner model", for Project 1 this part not used for Project One

13. The local-and-remote repository model Advantages of this model: You can work locally even if the network is unavailable. It's very fast You can 're-sync' later.

14. The mysterious HASH code (SHA-1) Every document has a 40 character "signature" computed from all of its characters. It is called a SHA-1 and looks like 24b9da6552252987aa493b52f8696cd6d3b00373 These are used as 'handles' for all documents (not file names) So every new version of a file has a new SHA-1. AND Any corruption of a file can be detected by recomputing SHA-1.

15. Three states of a code file: committed: (working copy == repository copy) modified: (working copy != repository copy) staged: ready for recommitment, after you tell us WHY (the 'index' keeps track of what's staged)

16. The basic workflow 1. Modify files in your working directory 2. "Stage" the files, adding snapshots to the 'index' (staging area) 3. "Commit" the files, adding explanation and saving to repository Here’s how you will get set up, and DO IT, in the lab.

17. Using the Command Line Interface (“Console”) On Mac:

18. Using the Command Line Interface (“Console”) On PC:You access the Run command by holding down the Windows logo key and pressing R.

19. OR you can use the ‘unix-like shell’ called Gitbash

20. Install Git Don't follow the 'from source' description in the text. Follow the instructions from your download site, at git-scm.com Lab Instructor will help if needed Customize your git: >git config --global user.name "John Doe" (use your name) >git config --global user.email johndoe@example.com

21. Initialize your Repository 1. Copy my 3 example files from the course website into a directory titled 'project0', in your docroot (htdocs for MAMP, www for WAMP) 2. Also create a super simple HTML “hello world” file, And call it hello.html. 3. Using your console window, change directory (cd) to your project0 folder. (green=computer’s output) >cd /Applications/MAMP/htdocs/DIG4104c/project0

22. Looking Around >ls (or, if you’re using windows, >dir) earth.gif example.dragdrop.html hello.html

23. >ls –la (I don’t know HOW to do this on PC Console. Use gitBash.) total 632 drwxr-xr-x 9 jmichaelmoshell admin 170 Jan 6 03:28 . drwxr-xr-x 14 jmichaelmoshell admin 136 Jan 6 03:28 .. drwxr-xr-x 4 jmichaelmoshell admin 313470 Dec 29 15:16 earth.gif drwxr-xr-x 4 jmichaelmoshell admin 1300 Jan 5 126:51 example.dragdrop.html -rw-r--r--@ 1 jmichaelmoshell admin 108 Jan 6 03:26 hello.html Note: The –la means "show hidden files and details". The files with a dot in front of their names are hidden from ls. The details include privileges, creator, owner, size, date, name.

24. Initialize the repository project0>git init Initialized empty Git repository in /Applications/MAMP/ htdocs/DIG4104c/project0/.git project0>ls -la total 632 drwxr-xr-x 9 jmichaelmoshell admin 170 Jan 6 03:28 . drwxr-xr-x 14 jmichaelmoshell admin 136 Jan 6 03:28 .. drwxr-xr-x 4 jmichaelmoshell admin 340 Jan 6: 03:35 .git drwxr-xr-x 4 jmichaelmoshell admin 313470 Dec 29 15:16 earth.gif drwxr-xr-x 4 jmichaelmoshell admin 1300 Jan 5 126:51 example.dragdrop.html -rw-r--r--@ 1 jmichaelmoshell admin 108 Jan 6 03:26 hello.html

25. Initial Commit >git add * >git commit –m 'Initial project version’ [master (root-commit) dda0064] Initial project version 3 files changed, 67 insertions(+) create mode 100644 earth.gif create mode 100644 example.dragdrop.html create mode 100644 hello.html

26. If you omit the commit message git will open an editor. You won’t like it... Initial Commit >git add * >git commit –m 'Initial project version’ [master (root-commit) dda0064] Initial project version 3 files changed, 67 insertions(+) create mode 100644 earth.gif create mode 100644 example.dragdrop.html create mode 100644 hello.html

27. Edit ‘hello.html’. Previous version just had <h2>Hi there world!</h2> New version adds <p>Adding some body text</p> I saved it, so now the working directory does not match the repository.

28. Compare workspace to committed version >git diff JMMairBook:Project0 jmichaelmoshell$ git diff diff --git a/hello.html b/hello.html index fa40afe..ea0287b 100644 --- a/hello.html +++ b/hello.html @@ -5,5 +5,6 @@ </head> <body> <h1>Hi there world!</h1> +<p>Adding some body text</p> </body> </html>

29. Add hello.html to the staging area >git add hello.html > // no message here; it's just staged >git status # On branch master # Changes to be committed: # (use "git reset HEAD <file>..." to unstage) # # modified: hello.html #

30. Commit the change >git commit –m 'Added body text.' [master 53ad16a] Added body text. 1 file changed, 1 insertion(+)

31. Look at the log of changes >git log commit 53ad16afe185db2dec9c95ef4e4cfe01e0befc41 Author: Mike Moshell <jm.moshell@regmaster.com> Date: Sun Aug 26 16:13:31 2012 -0400 Added body text. commit bb39112feb93c26395450bf5cb0f74af64346867 Author: Mike Moshell <jm.moshell@regmaster.com> Date: Sat Aug 25 14:54:04 2012 -0400 Initial project version The log is in reverse chronological order (newest first)

32. In the Lab, you will repeat this “Warm-up” procedure on hello.html and then ... Begin creating, staging and committing your code for Project 1 ... WHICH is our next topic.