各種工具介紹

        4

        5

      6

   8

   9

     10

    11

  13

   14

    15

    16

   17

role :demo, %w{example.com example.org example.net} task :uptime do on roles(:demo),
in: :parallel do |host| uptime = capture(:uptime) puts "#{host.hostname} reports: #{uptime}" end end 20

     21

Vagrant.configure("2") do |c| c.vm.box = "precise32" c.vm.hostname = "myprecise.box" c.vm.network
:private_network, ip: "192.168.0.42" c.vm.provider :virtualbox do |vb| vb.customize [ "modifyvm", :id, "--cpuexecutioncap", "50", "--memory", "256", ] end end 24

   25

package 'apache2' service 'apache2' do supports status: true action [:enable,
:start] end 27

powershell_script 'Install IIS' do code 'Add-WindowsFeature Web-Server' guard_interpreter :powershell_script not_if
"(Get-WindowsFeature -Name Web-Server).Installed" end # World Wide Web Publishing Service service 'w3svc' do action [:enable, :start] end 28

     29

--- - hosts: webservers vars: http_port: 80 max_clients: 200 remote_user:
root tasks: - name: ensure apache is at the latest version yum: name=httpd state=latest - name: write the apache config file template: src=/srv/httpd.j2 dest=/etc/httpd.conf notify: - restart apache - name: ensure apache is running (and enable it at boot) service: name=httpd state=started enabled=yes handlers: - name: restart apache service: name=httpd state=restarted 31

     32

https://laravel.tw/docs/5.1/quickstart 37

$ composer create-project laravel/laravel \ quickstart --prefer-dist 38

$ php artisan make:migration \ create_tasks_table --create=tasks 39

$ php artisan make:migration \ create_tasks_table --create=tasks 40

<?php use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateTasksTable extends Migration {
public function up() { Schema::create('tasks', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->timestamps(); }); } public function down() { Schema::drop('tasks'); } } 41

$ php artisan migrate 42

$ php artisan make:model Task 43

<?php namespace App; use Illuminate\Database\Eloquent\Model; class Task extends Model {
// } 44

<?php use App\Task; use Illuminate\Http\Request; Route::get('/', function () { //
}); 45

<?php use App\Task; use Illuminate\Http\Request; Route::get('/', function () { $tasks
= Task::orderBy('created_at', 'asc')->get(); return view('tasks', [ 'tasks' => $tasks ]); }); 46

// resources/views/layouts/app.blade.php <!DOCTYPE html> <html> <body> <div class="container"> <nav class="navbar
navbar-default">  </nav> </div> @yield('content') </body> </html> 47

// resources/views/tasks.blade.php @extends('layouts.app') @section('content')  @if
(count($tasks) > 0) @foreach ($tasks as $task)  {{ $task->name }}  @endforeach @endif @endsection 48

https://laravel.tw/docs/5.1/quickstart 50

http://guides.ruby.tw/rails3/getting_started.html http://guides.rubyonrails.org/getting_started.html 52

$ rails new quickstart 53

$ rails generate scaffold Task name:string 54

$ rails generate model Task name:string $ rails generate controller
Tasks $ rails generate view Task 55

class CreateTasks < ActiveRecord::Migration def change create_table :tasks do |t|
t.string :name t.timestamps null: false end end end 56

$ rake migrate 57

$ rake migrate 58

class Task < ActiveRecord::Base end 59

class TasksController < ApplicationController before_action :set_task, only: [:show, :edit, :update,
:destroy] # GET /tasks # GET /tasks.json def index @tasks = Task.all end # GET /tasks/1 # GET /tasks/1.json def show end #... 60

Rails.application.routes.draw do resources :tasks end 61

# app/views/layouts/application.html.erb <!DOCTYPE html> <html> <body> <div class="container"> <nav class="navbar
navbar-default">  </nav> </div> <%= yield %> </body> </html> 62

# app/views/tasks/index.html.erb  <% @tasks.each do
|task| %>  <%= task.name %>  <% end %> 63

http://guides.ruby.tw/rails3/getting_started.html http://guides.rubyonrails.org/getting_started.html 65

var express = require('express'); var app = express(); app.get('/', function
(req, res) { res.send('Hello World!'); }); var server = app.listen(3000, function () { var host = server.address().address; var port = server.address().port; console.log('Listening at http://%s:%s', host, port); }); 67

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 71

<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button"
class="navbar-toggle collapsed" data- toggle="collapse" data-target="#navbar" aria-expanded="false" aria- controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </nav> 72

<div class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead"> Use
this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document. </p> </div> </div> 73

<div class="btn-group" role="group"> <button class="btn btn-default">1</div> <button class="btn btn-default">2</div> <button
class="btn btn-default">3</div> </div> 75

<button class="btn btn-default btn-lg">1</div> <button class="btn btn-default">2</div> <button class="btn btn-default
btn-sm">3</div> 76

<button class="btn btn-primary">1</div> <button class="btn btn-success">2</div> <button class="btn btn-info">3</div> <button
class="btn btn-warning">4</div> <button class="btn btn-danger">5</div> <button class="btn btn-link">6</div> 77

83  <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js"></script>

84 http://semantic-ui.com/usage/layout.html

85 <div class="ui buttons"> <button class="ui button">1</button> <button class="ui button">2</button>
<button class="ui button">3</button> </div>

86 <button class="ui large button">1</button> <button class="ui button">2</button> <button class="ui
small button">3</button>

87 <button class="ui red button">Red</button> <button class="ui orange button">Orange</button> <button
class="ui yellow button">Yellow</button> <button class="ui olive button">Olive</button> <button class="ui green button">Green</button>

88 <div class="ui labeled button"> <div class="ui red button"> <i
class="heart icon"></i> Like </div> <a class="ui basic red left pointing label"> 1,048 </a> </div>

89 <div class="ui labeled button"> <div class="ui basic blue button">
<i class="fork icon"></i> Forks </div> <a class="ui basic left pointing blue label"> 1,048 </a> </div>

90 <div class="ui buttons"> <button class="ui button">Cancel</button> <div class="or"></div> <button
class="ui positive button">Save</button> </div>

95 http://semantic-ui.com/examples/sticky.html

96 http://semantic-ui.com/usage/layout.html

98 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />

99 http://purecss.io/layouts/

100 <button class="pure-button">1</button> <button class="pure-button pure-button-primary">2</button>

107 https://docs.angularjs.org/tutorial

108 <body ng-controller="PhoneListCtrl"> Search: <input ng-model="query"> Sort by: <select ng-model="orderProp">
<option value="name">Alphabetical</option> <option value="age">Newest</option> </select> <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> </li> </ul> </body>

110 var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.phones = [ {'name': 'Nexus S', 'snippet': 'Fast just got faster with Nexus S.', 'age': 1}, {'name': 'Motorola XOOM™ with Wi-Fi', 'snippet': 'The Next, Next Generation tablet.', 'age': 2}, {'name': 'MOTOROLA XOOM™', 'snippet': 'The Next, Next Generation tablet.', 'age': 3} ]; $scope.orderProp = 'age'; });

115 https://docs.angularjs.org/tutorial

117 https://facebook.github.io/react/docs/getting-started.html

118 var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed:
0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, render: function() { return ( <div>Seconds Elapsed: {this.state.secondsElapsed}</div> ); } }); ReactDOM.render(<Timer />, mountNode);

121 https://facebook.github.io/react/docs/getting-started.html

127 <div class="ui labeled button"> <div class="ui red button"> <i
class="heart icon"></i> Like </div> <a class="ui basic red left pointing label"> 1,048 </a> </div>

128 .ui.labeled.button .ui.red.button i.heart.icon Like a.ui.basic.red.left.pointing.label | 1,048

130 # Assignment: number = 42 opposite = true #
Conditions: number = -42 if opposite # Functions: square = (x) -> x * x # Arrays: list = [1, 2, 3, 4, 5]

131 var list, number, opposite, square; number = 42; opposite
= true; if (opposite) { number = -42; } square = function(x) { return x * x; }; list = [1, 2, 3, 4, 5];

132 # Objects: math = root: Math.sqrt square: square cube:
(x) -> x * square x # Splats: race = (winner, runners...) -> print winner, runners # Existence: alert "I knew it!" if elvis? # Array comprehensions: cubes = (math.cube num for num in list)

133 var math, num, race, square, slice = [].slice; math
= { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); } }; race = function() { var runners, winner; winner = arguments[0], runners = 2 <= arguments.length ? slice.call(arguments, 1) : []; return print(winner, runners); }; if (typeof elvis !== "undefined" && elvis !== null) { alert("I knew it!"); } cubes = (function() { var i, len, results; results = []; for (i = 0, len = list.length; i < len; i++) { num = list[i]; results.push(math.cube(num)); } return results; })();

135 nav ul { margin: 0; padding: 0; list-style: none;
} nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }

136 nav { ul { margin: 0; padding: 0; list-style:
none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }

137 $primary-color: #333; button { background-color: $primary-color; } a {
color: $primary-color; }

139 @include keyframes(slide-right) { 0% { @include transform( translate(0.0px, 0.0px)
); } 50% { @include transform( translate(200.0px, 0.0px) ); } 100% { @include transform( translate(150.0px, 150.0px) ); } }

140 @-moz-keyframes slide-right { /* ... */ } @-webkit-keyframes slide-right
{ /* ... */ } @-ms-keyframes slide-right { /* ... */ } @keyframes slide-right { /* ... */ }

141 .box1 { background-color: red; width: 35px; height: 35px; @include
border-radius(25px); @include animation(slide-right 1s linear 0s infinite alternate); }

142 .box1 { background-color: red; width: 35px; height: 35px; -moz-border-radius:
25px; -webkit-border-radius: 25px; border-radius: 25px; -webkit-animation: slide-right 1s linear 0s infinite alternate; -moz-animation: slide-right 1s linear 0s infinite alternate; -ms-animation: slide-right 1s linear 0s infinite alternate; animation: slide-right 1s linear 0s infinite alternate; }

各種工具介紹

各種工具介紹

More Decks by David Kuo (Davy)

Other Decks in Education

Featured

Transcript