Web Design Workshop
DIG 4104c
Spring 2014
Dr. J. Michael Moshell
University of Central Florida
www.redbugbblle.com
Lecture 2:
The git source control system
1
About git
en.wikipedia.org
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.
-2 -
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.
-3 -
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.
-4 -
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?
-5 -
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)
-6 -
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.
-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.
It can 'remind' you of the changes you made.
It can show you the lines of code that were changed.
-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.
Most importantly, it can organize a team's work so that
you don't destroy each others' work.
-9 -
The Team model, with a central repository (old way of doing it)
-10 -
The Distributed model, with local repositories
-11 -
Our "beginner model", for Project 1
this part
not used
for Project
One
-12 -
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.
-13 -
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.
-14 -
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)
-15 -
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.
-16 -
Using the Command Line Interface
(“Console”)
On Mac:
-17 -
Using the Command Line Interface
(“Console”)
On PC:You access the Run command by holding down the
Windows logo key
and pressing R.
-18 -
OR you can use the ‘unix-like shell’
called Gitbash
-19 -
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
-20 -
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
-21 -
Looking Around
>ls (or, if you’re using windows, >dir)
earth.gif
example.dragdrop.html
hello.html
-22 -
>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.
-23 -
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
-24 -
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
-25 -
Initial Commit
If you omit the commit message
git will open an editor. You won’t like it...
>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 -
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.
-27 -
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>
-28 -
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
#
-29 -
Commit the change
>git commit –m 'Added body text.'
[master 53ad16a] Added body text.
1 file changed, 1 insertion(+)
-30 -
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)
-31 -
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.
-32 -