NextAcademy · Mogherbi · Jul 27, 2017 · Jul 27, 2017 · Jul 27, 2017 · Jul 28, 2017
diff --git a/.byebug_history b/.byebug_history
@@ -0,0 +1,5 @@
+c
+params
+params[:long_url]
+params
+@url
diff --git a/.ruby-version b/.ruby-version
diff --git a/27JulyNotes2.txt b/27JulyNotes2.txt
@@ -0,0 +1,8 @@
+AJAX is a developer's dream, because you can:
+
+-Update a web page without reloading the page
+-Request data from a server - after the page has loaded
+-Receive data from a server - after the page has loaded
+-Send data to a server - in the background
+
+document.get(elementbyID)
diff --git a/Gemfile b/Gemfile
@@ -1,7 +1,7 @@
 source 'https://rubygems.org'
 
 # Ruby Version
-# ruby "2.2.1"
+ruby "2.4.0"
 
 # Adding Sinatra Drivers
 gem 'sinatra'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -91,5 +91,8 @@ DEPENDENCIES
   sinatra-contrib
   thin
 
+RUBY VERSION
+   ruby 2.4.0p0
+
 BUNDLED WITH
-   1.15.1
+   1.15.2
diff --git a/app/controllers/static.rb b/app/controllers/static.rb
@@ -1,3 +1,49 @@
+require 'securerandom'
+
 get '/' do
+  @urls = Url.all.order("created_at DESC")
   erb :"static/index"
-end
+end
+
+post '/shorten' do
+  @url = Url.new(long_urls: params["long_urls"], short_urls: SecureRandom.hex(4))
+   #creates a ew object called @url then using the short_urls: SecureRandom.hex(4) this generates a secure random output that has a lower probability of redundancy.
+   if @url.save
+  # p params
+  # "example"
+  redirect '/' #redirects the user back to the 'root' or main web page
+else #i need my code to rememeber my error variable when its not saved successfully, thats why i load the erb instead of redirecting to "/" because once i do reidrecting to '/' my code will forget the defiend local variable
+  #this is the error message given from ActiveRecord because it does not pass the validation stated on m odel urb
+  @errors = @url.errors.full_messages.join(",")
+end
+  @urls = Url.all.order("created_at DESC")
+  erb :"static/index"
+end
+
+post '/:url_id/vote' do
+  # whatever you see on the browser is the value, and then the key i set to id by inserting : here
+  # 1-find out which url i am upvoting
+  @url = Url.find(params[:url_id])
+
+  @url.click_count +=1
+  @url.save
+  redirect '/'
+
+end
+
+get '/:shortshort' do
+  #1 look for this url now
+  #2 increase the lick count because ijust clicked on the short url
+  #3 i will redirect to the l;ong url (original website)
+  #look for this url now
+  @url = Url.find_ny(short_urls: params[:shortshort])
+  @url.click_count +=1
+  @url.save
+  rediirect to "#{@url.long_urls}"
+end
+
+post "/test" do
+  @url = Url.new(long_urls: params[:long_urls], short_urls: SecureRandom.hex(4))
+  @url.save
+  @url.to_json
+end
diff --git a/app/models/url.rb b/app/models/url.rb
@@ -0,0 +1,6 @@
+class Url < ActiveRecord::Base
+  validates :long_urls, uniqueness: true
+  validates :long_urls, format: {with: (URI::regexp(['http', 'https'])), message: "Entrered URL is Invalid!"}
+	# This is Sinatra! Remember to create a migration!
+  #above validatesusing the "validates at lines 2 & 3"
+end
diff --git a/app/views/layouts/application.erb b/app/views/layouts/application.erb
@@ -1,8 +1,16 @@
 <html>
 	<head>
 		<title>Sinatra Framework</title>
+		  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
+			<link rel="stylesheet" href="/css/application.css"/>
+			<script
+     src="http://code.jquery.com/jquery-3.2.1.js"
+     integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
+     crossorigin="anonymous">
+   </script>
+	 <script src="/test.js"></script>
 	</head>
 	<body>
 		<%= yield %>
 	</body>
-</html>
+</html>
diff --git a/app/views/static/index.erb b/app/views/static/index.erb
@@ -1,2 +1,39 @@
-<h1>Hello World</h1>
-<p>See Me in views/static/index.html.erb</p>
+<h1>Bitly Clone</h1>
+  <!-- params[]"long_url"]-->
+  <!-- when there is a % sign on html tag, it means it is an embnedded ruby file; simply means you can encode inside html file  -->
+<p><%= @errors if @errors %></p>
+
+
+<form id= 'create_url' action="/shorten" method="post">
+  <input id="text_input" type="text" name="long_urls" placeholder="Insert your url here">
+  <input id='shorten-btn' type="Submit" value="Shorten!">
+</form>
+
+
+<table class="table">
+  <tr>
+    <th>Long URL</th>
+    <th>Short URL</th>
+    <th>Click Count</th>
+  </tr>
+  <% @urls.each do |url| %>
+    <tr>
+      <td>
+        <a href="<%= url.long_urls %>">
+          <%= url.long_urls %>
+        </a>
+      </td>
+      <td>
+        <a href="/<%= url.short_urls %>">
+          <%= url.short_urls %>
+        </a>
+        </td>
+      <td><%= url.click_count %></td>
+      <td>
+        <form action="/<%=url.id%>/vote" method="post">
+          <input type="submit" value="Vote"></td>
+        </form>
+      </td>
+    </tr>
+  <% end %>
+</table>
diff --git a/db/migrate/20170726121009_create_urls.rb b/db/migrate/20170726121009_create_urls.rb
@@ -0,0 +1,9 @@
+class CreateUrls < ActiveRecord::Migration[5.0]
+	def change
+		create_table :urls do |t| #we just created a new table called "urls"
+			t.string :long_urls #we created a new column of strings called long_urls
+			t.string :short_urls #we created a new column of strings called short_urls
+			t.timestamps #we created a new column called t.timestamps which automatically creates two new columns: one is created_at and one called updated_at
+		end
+	end
+end
diff --git a/db/migrate/20170727104024_add_click_count_to_urls.rb b/db/migrate/20170727104024_add_click_count_to_urls.rb
@@ -0,0 +1,5 @@
+class AddClickCountToUrls < ActiveRecord::Migration[5.0]
+	def change
+		add_column :urls, :click_count, :integer, default: 0
+	end
+end
diff --git a/notes.txt b/notes.txt
@@ -0,0 +1,23 @@
+incorporate bootstrap cdn link so that i can see my shortened link in a nicer table
+
+1- validations (url, means i cant enter any invalid, i cant enter repetitive link
+-if the entry is saved, then good. if the entry is not valid, how should i deal with it? Should i enter an error message manually? or should i just borrow the validation error message from active record
+Click count for the link that we shortened
+
+*****************************************
+
+to commit and push changes to Heroku
+1- make my changes to my local files
+2- test it on my 127.0.0.1:9393 or see link below: (http://127.0.0.1:9393) by typing into my terminal :
+    - $ rake server
+3- when its successful or i approve changes: do below steps:
+
+$ git add .
+$ git commit
+- (enter commit message e.g. "i changed background color")
+- esc
+- :wq!
+
+$ git push (origin/heroku) master
+
+*****************************************
diff --git a/public/css/application.css b/public/css/application.css
@@ -0,0 +1,54 @@
+body{
+  background-color: yellow;
+}
+
+h1 {
+  color: red;
+  font-size: 130px;
+  font-style: italic;
+  font-family: Chalkduster;
+  font-weight: 900;
+  text-align: center;
+  margin-top: 90px;
+}
+
+form {
+  margin-top: 1.75cm;
+  margin-left: 7cm;
+}
+
+input {
+  border: 9px solid navy;
+  font-size: 55px;
+
+}
+tr {
+  color: red;
+
+}
+
+th {
+    color: red;
+    column-fill: balance;
+    background-color: blue;
+    border-style: dotted;
+    /*border-spacing: 10px;*/
+    color: white;
+}
+
+table {
+    color: red;
+    background-color: DeepSkyBlue;
+    border: 20px solid red;
+    border-collapse: separate;
+    border-spacing: 0 1em;
+    /*border-style: groove;*/
+
+}
+
+#shorten-btn {
+  -webkit-appearance: button;
+  font-size: 55px;
+  height: inherit;
+  color: red;
+}
diff --git a/public/js/application.js b/public/js/application.js
@@ -0,0 +1,21 @@
+$(document).ready(funciton(){
+  $("#create_url").on("submit", function(event){
+    event.preventDefault()
+    form_inputs = $(this).serialize()
+    $.ajax({
+      url: "/test",
+      method: "post",
+      data: form_inputs,
+      dataType: "json",
+      success: function(data){
+        $("tbody").append(
+          "<tr><td><a href=" + data.long_url + ">" +
+          data.long_url + "</a>" +
+          "</td><td>" +
+          data.short_url +
+          "</td><td>0</td><td></td></tr>"
+        )
+      }
+    })
+  })
+})
diff --git a/public/test.js b/public/test.js
@@ -0,0 +1,22 @@
+$(document).ready(function(){
+  $("#create_url").on("submit", function(event){
+    event.preventDefault()
+    form_inputs = $(this).serialize()
+    $.ajax({
+      url: "/test",
+      method: "post",
+      data: form_inputs,
+      dataType: "json",
+      success: function(data){
+        debugger
+        $("tbody").append(
+          "<tr><td><a href=" + data.long_urls + ">" +
+          data.long_urls + "</a>" +
+          "</td><td>" +
+          data.short_urls +
+          "</td><td>0</td><td></td></tr>"
+        )
+      }
+    })
+  })
+})