-
Notifications
You must be signed in to change notification settings - Fork 0
/
getstarted.html
126 lines (123 loc) · 11.4 KB
/
getstarted.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>How to get started with development?</title>
<meta name="description" content="Blockchain platform for PHP developers">
<meta property="og:type" content="website">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="assets/fonts/line-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/material-icons.min.css">
<link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-dark navbar-custom">
<div class="container"><a class="navbar-brand" href="index.html"><img src="assets/img/aro-300.png" class="logo">Arionum</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navbarResponsive"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse"
id="navbarResponsive">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link" href="getarionum.html">Get Arionum</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="downloads.html">Downloads</a></li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#">Documentation </a>
<div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="miners.html">How to mine</a><a class="dropdown-item" role="presentation" href="masternodes.html">Masternode guides</a><a class="dropdown-item" role="presentation" href="documentation.html">For PHP developers</a>
<div
class="dropdown-divider" role="presentation"></div><a class="dropdown-item" role="presentation" href="https://www.arionum.com/wp.pdf" target="_blank">Whitepaper</a><a class="dropdown-item" role="presentation" href="roadmap.html">Roadmap</a></div>
</li>
<li class="nav-item" role="presentation"><a class="nav-link" href="community.html">Community</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="network.html">Network status</a></li>
</ul>
</div>
</div>
</nav>
<header class="masthead text-center text-white">
<div data-aos="zoom-in" data-aos-delay="200" class="masthead-content">
<div class="container">
<h1 class="masthead-heading mb-0">Beginner's guide</h1>
<h2 class="masthead-subheading mb-0"> for PHP developers</h2><a class="btn btn-primary btn-xl rounded-pill mt-5" role="button" href="#quickstart" style="background-color: rgb(52,58,64);">QUICK START</a></div>
</div>
<div class="bg-circle-1 bg-circle"></div>
<div class="bg-circle-2 bg-circle"></div>
<div class="bg-circle-3 bg-circle"></div>
<div class="bg-circle-4 bg-circle"></div>
</header>
<div class="container text-justify" id="quickstart">
<div class="jumbotron" style="background-color: #ffffff;">
<h1 class="text-center" data-aos="zoom-in" data-aos-delay="300">Create your first application.</h1>
<p data-aos="zoom-in" data-aos-delay="300" class="alert alert-secondary" style="background-color: rgb(255,255,255);">You can start writing your application without any required libraries. A good starting point for your inspiration for "clean" PHP code with examples can be found at <a href="http://aro.wiki/how-to-get-started-with-aro-arionum-as-a-php-developer/"
target="_blank">Aro.wiki</a> written by KyleFromOhio.</p>
<p data-aos="zoom-in" data-aos-delay="300" class="alert alert-secondary">Of course, the Arionum community have prepared components that you can easily integrate with your new or existing applications. In our guide we will use <a href="https://nette.org/en/" target="_blank">Nette framework</a> and pxgamer's
PHP <a href="https://github.com/pxgamer/arionum-php" target="_blank">API wrapper</a> to speed up our development. We will create simple donation status page. As a first step we will prepare development environment.</p>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Installing Nette framework and API wrapper</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-justify">In this tutorial we'll expect that you have PHP 7.2+, that you are familiar with the Composer dependency manager and that you already have it installed in your operating system. If not, you can download it from this <a href="https://getcomposer.org/download/"
target="_blank">link</a> or simply install it by using the "apt-get install composer" command. As a first step, we will start with downloading the Nette application skeleton. Copy this line to your terminal or command line where
you want to have it.<br><span class="small pull-right">* (debian/ubuntu users only)</span></p>
<p><br></p>
<p class="text-dark code">composer create-project nette/web-project donation-page<br></p>
<p class="text-justify">We will see something like this. You can enter to downloaded directory "donation-page" and check the files there:<br></p><img class="img-fluid" src="assets/img/installnette.png">
<p><br>This is the basic structure for our PHP application</p><img class="img-fluid" src="assets/img/netteroot.png">
<p class="text-justify"><br>Very nice, the application skeleton is now ready, but as Arionum requires a minimum of PHP 7.2, we will need to change our composer.json accordingly. Check the last lines in composer.json, where PHP version for our application is defined,
and change it from <code>"php" : "5.6"</code> to <code>"php": "7.2"</code> as it is on the picture below.</p><img class="img-fluid" src="assets/img/changecomposerjson.png">
<p class="text-justify"><br>The Nette framework (web server exactly) will need write access to log and temp directory.</p>
<p class="text-dark code">chmod -R 777 log temp<br></p>
<p class="text-justify small">Of course this is required and will work only in a Linux operating system.<br></p>
<p class="text-justify">After that, we can install the PHP wrapper for interaction with Arionum nodes.</p>
<p class="text-dark code">composer require pxgamer/arionum-php<br></p>
<p class="text-justify">We will see something like this:<br></p><img class="img-fluid" src="assets/img/apiwrapper.png">
<p class="text-justify"><br>Now we have installed all the required components we needed to start with. So we can spin up the integrated PHP webserver:</p>
<p class="text-dark code">php -S localhost:8080 -t www<br></p>
<p class="text-justify">Now when we open the following address <a href="http://localhost:8080" target="_blank">http://localhost:8080</a> in web browser, we will see this result:<br></p><img class="img-fluid" src="assets/img/netteready.png">
<h1 class="text-center"><br>Start code!</h1>
<p class="text-justify"><br>All is working as expected and our environment is prepared, so let's start to code. As a first step we will clean up the template a little bit. The template file that we are going to change is located in "app/presenters/templates/ homepage/default.latte",
open it and remove the unnecessary content, change the title, remove the CSS image from h1 element and center h1 with CSS.</p><img class="img-fluid" src="assets/img/cleanup.png">
<p class="text-justify"><br>Now we can open the homepage presenter, where we will load the desired values and prepare them for our view. The homepage presenter is located in "app/presenters/HomepagePresenter.php".</p><img class="img-fluid" src="assets/img/homepagepresenter.png">
<p
class="text-justify"><br>And back to the template where we will render assigned variables.</p><img class="img-fluid" src="assets/img/displayvalues.png">
<p class="text-justify"><br>After saving the files, we can refresh our webpage in the web browser and voila.</p><img class="img-fluid" src="assets/img/donationdone.png">
<p class="text-justify"><br>We have our donation status page. That was simple, easy and quick, right? :) <br><br>Code for this example can be found here <a href="https://github.com/ariochain/arionum-get-started" target="_blank">https://github.com/ariochain/arionum-get-started</a></p>
</div>
</div>
</div>
</div>
<section>
<div class="container">
<div class="spacer">
<div class="row">
<div class="col text-center"><a class="btn btn-primary btn-xl rounded-pill wallet" role="button" href="community.html">Join our community<br></a></div>
</div>
</div>
</div>
</section>
<div class="social-icons"><a href="https://twitter.com/ArionumCrypto" target="_blank" title="Twitter"><i class="icon ion-social-twitter"></i></a><a href="https://arionum.info/discord/" target="_blank" title="Discord"><i class="fab fa-discord icon"></i></a><a href="https://arionum.info/telegram/"
title="Telegram"><i class="fa fa-telegram icon"></i></a><a href="https://www.facebook.com/ArionumCryptocurrency/" target="_blank" title="Facebook"><i class="fa fa-facebook-f icon"></i></a><a href="https://bitcointalk.org/index.php?topic=2710248.msg"
target="_blank" title="Bitcointalk"><i class="fa fa-bitcoin icon"></i></a></div>
<footer class="py-5" style="background-color: rgb(52,58,64);">
<div class="text-center"><img src="assets/img/aro-300.png" id="logofooter" class="logo"></div>
<div class="container">
<p class="text-center text-white m-0">Copyright © Arionum Developers 2019</p>
</div>
</footer>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>
<script src="assets/js/script.min.js"></script>
</body>
</html>