Get excited and make things Software changes cultures. We believe that in a world where everything will involve the Internet, we need to get more girls involved. Web applications are modern craftsmanship. Build tomorrow's products. Learn to solve problems. Wonder how things work. We can give the ingredients, but you make the recipes.

Timetable Friday 8th February 18:00 – 20:00 Installation Party Saturday 9th February 09:00 – 10:00 Registration, Installation & Coffee 10:00 – 10:20 A Word From Sponsors 10:20 – 10:40 Designing Your Web App 10:40 – 11:20 Introduction to Programming 11:15 – 11:30 Bento Box Exercise 11:30 – 13:00 WORKSHOP 13:00 – 14:00 Lunch 14:00 – 16:00 WORKSHOP 16:00 – 16:30 Lightning Talks AR Drones, From Web to Mobile, Writing a Blog in Less Time Than it Takes to Paint Your Nails. 16:30 – 17:30 WORKSHOP Extending Your App 18:30… After Party Drinks In Arthur’s on Thomas Street

Workshop Tutorial Step 1: Get to know the tools Text editor This is a fancy version of Notepad or TextEdit used for writing and editing your code. Terminal (aka Command Prompt on Windows) A window where you can type commands to the computer. This is where you will run the Rails server which will allow you to view your application in your web browser. Web browser e.g. Firefox, Safari, Chrome, for viewing your application. Step 2: Creating the application We’re going to create a new Rails app called railsgirls. First, let’s open a terminal:  Mac OS X: Open Spotlight, type Terminal and click the Terminal application.  Windows: Click Start and search for Command Prompt, then click Command Prompt with Ruby on Rails.  Linux (Ubuntu): Search for Terminal on the dash and click Terminal. Next, type these commands in the terminal – remember to ask your coach to explain what each one means.

mkdir projects cd projects rails new railsgirls cd rails girls rails server Open http://localhost:3000 in your browser. Hit CTRL- BREAK or CTRL-C in the terminal to quit the server. Step 3: Create Idea scaffold We’re going to use Rails’ scaffold functionality to generate a starting point that allows us to list, add, remove, edit, and view things; in our case ideas. Type the following: rails generate scaffold idea name:string description:text picture:string rake db:migrate rails server Open http://localhost:3000/ideas in your browser. Hit CTRL-BREAK or CTRL-C to quit the server again when you’ve clicked around a little.

Step 4: Design The app doesn’t look very nice yet. Let’s do something about that. We’ll use the Twitter Bootstrap project to give us nicer styling really easily. Open app/views/layouts/application.html.erb in your text editor and above the line <%= stylesheet_link_tag "application" %> add and replace <%= yield %> with Let’s also add a navigation bar and footer to the layout. In the same file, under add

and before

footer { margin-top: 100px; } table, td, th { vertical-align: middle !important; border: none !important; } th { border-bottom: 1px solid #DDD !important; } Have a look at the new look of your app in the browser. When you are done hit CTRL-BREAK or CTRL-C to quit the server. Step 5: Adding picture uploads We need to install a piece of software to let us upload files in Rails. Ask your coach about libraries, gems and open source. Open Gemfile in the project directory and under the line gem 'sqlite3' add gem 'carrierwave' In the terminal run: bundle Now we can generate the code for handling uploads. In the terminal run:

rails generate uploader Picture At this point you need to restart the Rails server process in the terminal. This is needed for the app to load the added library. To do this, in the terminal type: rails server Open app/models/idea.rb and under the line class Idea < ActiveRecord::Base add mount_uploader :picture, PictureUploader Open app/views/ideas/_form.html.erb and change <%= f.text_field :picture %> to <%= f.file_field :picture %> and <%= form_for(@idea) do |f| %> to <%= form_for(@idea, :html => { :multipart => true }) do |f| %>

When you upload a picture it doesn’t look nice because it only shows a path to the file, so let’s fix that. Open app/views/ideas/show.html.erb and change <%= @idea.picture %> to <%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %> Step 6: Finetune the routes If you try to open http://localhost:3000 it still shows the default page. Let’s make it redirect to the ideas page. On Mac OS X and Linux, in the terminal run: rm public/index.html On Windows, in the command prompt run: del public\index.html Then open config/routes.rb and after the first line add root :to => redirect('/ideas')

What next? Rails For Zombies This in-browser tutorial will cover what we’ve done in the workshop and more. It’ll also give you an appetite for brains. When you’ve got the basics there are more advanced Rails topics to move on to. railsforzombies.org Codecademy Learn Ruby, HTML, CSS and Javascript for free. codecadamy.com Rails Casts Ryan Bates of Rails Casts has kindly offered 3 free months of pro subscription to his video tutorials. To access, use the coupon we have provided. railscasts.com Why's Poignant Guide to Ruby Cult book with cartoon foxes and ruby exercises. bit.ly/YRtbqR Stack Overflow Googling a coding problem will inevitably lead you to Stack Overflow where a community of programmers ask and answer questions on everything to do with programming and computing. stackoverflow.com Ruby Ireland This is your local Ruby on Rails community. They have frequent meet-ups and the next one is on Tue 19th Feb at 7pm in Against The Grain, Wexford St. Please come along! rubyireland.com