Beranda
Postingan

Demo Syntax Highlighting untuk Beberapa Kode Pemrograman


Berikut adalah beberapa contoh sintaks dari berbagai platform yang sering digunakan dalam pengembangan web dan analisis data. Sintaks-sintaks ini mencakup RStudio untuk pemrosesan data, local macro di Minitab untuk otomatisasi analisis statistik, serta HTML, CSS, JavaScript, dan jQuery untuk pembuatan website interaktif.

1. LANGUAGE-R 

     
    RSTUDIO
    Tap 2x to all select
    


library(shiny)
library(DT)

ui <- fluidPage(
  titlePanel("Analisis Data Interaktif"),
  sidebarLayout(
    sidebarPanel(
      fileInput("file", "Upload Data", accept = c(".csv", ".xlsx")),
      selectInput("var_x", "Variabel X:", choices = NULL),
      selectInput("var_y", "Variabel Y:", choices = NULL),
      sliderInput("bins", "Jumlah bins:", min = 5, max = 50, value = 30),
      actionButton("analisis", "Jalankan Analisis"),
      downloadButton("unduh", "Unduh Hasil")
    ),
    mainPanel(
      tabsetPanel(
        tabPanel("Plot", plotOutput("distPlot")),
        tabPanel("Summary", verbatimTextOutput("summary")),
        tabPanel("Data", DTOutput("tabel")),
        tabPanel("Model", verbatimTextOutput("model"))
      )
    )
  )
)

server <- function(input, output, session) {
  data <- reactive({
    req(input$file)
    ext <- tools::file_ext(input$file$name)
    switch(ext,
           csv = read.csv(input$file$datapath),
           xlsx = readxl::read_excel(input$file$datapath),
           validate("Format file tidak didukung"))
  })
  
  observe({
    updateSelectInput(session, "var_x", choices = names(data()))
    updateSelectInput(session, "var_y", choices = names(data()))
  })
  
  output$distPlot <- renderPlot({
    input$analisis
    isolate({
      ggplot(data(), aes_string(x = input$var_x)) +
        geom_histogram(bins = input$bins, fill = "steelblue")
    })
  })
  
  output$tabel <- renderDT({
    datatable(data(), extensions = 'Buttons',
              options = list(dom = 'Bfrtip', buttons = c('copy', 'csv', 'excel')))
  })
  
  output$unduh <- downloadHandler(
    filename = function() { "hasil_analisis.csv" },
    content = function(file) { write.csv(analisis(), file) }
  )
}

shinyApp(ui, server)
2. LOCAL MACRO (Minitab) 

     
    MINITAB
    Tap 2x to all select
    



   /* 
   CONTOH LOCAL MACRO KOMPLEKS DI MINITAB
   Fungsi: Analisis regresi otomatis dengan diagnostik
   Fitur:
   1. Looping melalui prediktor
   2. Seleksi model stepwise
   3. Generasi laporan otomatis
   4. Penyimpanan hasil ke matriks
   5. Validasi silang
*/

MACRO
#######################################
### SETUP AWAL ###
#######################################

# Set output display
Brief 2;
Noecho;
Notitle;

# Inisialisasi variabel global
LET K1 = 0;          # Counter untuk iterasi
LET K2 = 0.05;       # Alpha threshold
TEXT C1 C2;          # Kolom teks untuk penyimpanan

# Data contoh (bisa diganti dengan data aktual)
READ C1-C5;
1 2 3 4 5
2 3 4 5 6
3 4 5 6 7
4 5 6 7 8
END;

NAME C1 'Y' C2 'X1' C3 'X2' C4 'X3' C5 'X4';

#######################################
### ANALISIS REGRESI OTOMATIS ###
#######################################

# Inisialisasi matriks untuk menyimpan hasil
MATRIX M1;
DIMENSION 10 5;  # 10 baris, 5 kolom

# Looping melalui semua kombinasi prediktor
LET K3 = 2;      # Mulai dari 2 prediktor
WHILE K3 <= 4;

  # Generate kombinasi prediktor
  COMBINATIONS K3 C2-C5 INTO C6-C9;
  
  # Regresi untuk setiap kombinasi
  REGRESS;
    RESPONSE 'Y';
    PREDICTORS C6-C9;
    BRIEF 1;
    STEPWISE K2 K2;
    RESULTS M2;
    MSE M3;
    PRESS M4;
  ENDREGRESS;
  
  # Simpan hasil ke matriks
  LET M1[K1+1,1] = K3;
  LET M1[K1+1,2] = M2[1,1];  # R-squared
  LET M1[K1+1,3] = M2[2,1];  # Adj R-squared
  LET M1[K1+1,4] = M3;       # MSE
  LET M1[K1+1,5] = M4;       # PRESS
  
  # Catat prediktor yang digunakan
  CONCAT "Model dengan " %S(K3) " prediktor" INTO C10[K1+1];
  
  LET K1 = K1 + 1;
  LET K3 = K3 + 1;
ENDWHILE;

#######################################
### VALIDASI SILANG ###
#######################################

# Setup validasi silang k-fold (k=5)
LET K4 = 5;
DO K5 = 1:K4;
  
  # Pisahkan data training dan testing
  SAMPLE %S(K5) 1 C1-C5 INTO C11-C15;
  
  # Latih model pada data training
  REGRESS C11 C12-C15;
    RESPONSE 'Y';
    PREDICTORS 'X1'-'X4';
    SAVE PREDICTIONS C16;
    RESIDUALS C17;
  ENDREGRESS;
  
  # Hitung RMSE pada data testing
  LET K6 = RSS(C17)/N(C17);
  LET K7 = SQRT(K6);
  
  # Simpan hasil validasi
  LET C18[K5] = K7;
ENDDO;

#######################################
### OUTPUT DAN VISUALISASI ###
#######################################

# Print hasil utama
PRINT "Hasil Analisis Regresi";
PRINT M1;
PRINT "RMSE Validasi Silang";
PRINT C18;

# Plot performa model
PLOT C18*INDEX;
  TITLE "Perform Model dalam Validasi Silang";
  SYMBOL;
  LINE;
ENDPLOT;

#######################################
### EKSPOR HASIL ###
#######################################

# Ekspor matriks hasil ke file
WRITE "hasil_regresi.txt" M1;

# Generate laporan otomatis
OUTFILE "laporan_analisis.txt";
  PRINT "LAPORAN ANALISIS REGRESI";
  PRINT "-----------------------";
  PRINT "R-squared terbaik: " %S(MAX(M1[*,2]));
  PRINT "Model dengan MSE terkecil: " %S(MIN(M1[*,4]));
  PRINT "RMSE rata-rata validasi silang: " %S(MEAN(C18)));
CLOSEFILE;

ENDMACRO
3. HTML 

     
    HTML
    Tap 2x to all select
    



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comprehensive HTML Example</title>
</head>
<body>
    <header>
        <nav>
            <div class="logo">Company Name</div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>Welcome to Our Website</h1>
                <p>We provide innovative solutions for your business needs</p>
                <button class="btn">Learn More</button>
            </div>
        </section>

        <section id="about" class="about">
            <h2 class="section-title">About Us</h2>
            <div class="about-content">
                <div class="about-img">
                    <img src="about-image.jpg" alt="About our company">
                </div>
                <div class="about-text">
                    <h3>Our Story</h3>
                    <p>Founded in 2010, we've been delivering quality services to our clients worldwide.</p>
                    <p>Our team consists of experienced professionals dedicated to excellence.</p>
                    
                    <div class="skills">
                        <h3>Our Skills</h3>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>Web Development</span>
                                <span>95%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" style="width: 95%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>Graphic Design</span>
                                <span>85%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" style="width: 85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="services" class="services">
            <h2 class="section-title">Our Services</h2>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">📱</div>
                    <h3>Mobile Development</h3>
                    <p>We create responsive mobile applications for iOS and Android platforms.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">🖥️</div>
                    <h3>Web Development</h3>
                    <p>Custom website development with modern technologies.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">🎨</div>
                    <h3>UI/UX Design</h3>
                    <p>Beautiful and intuitive user interfaces designed for optimal experience.</p>
                </div>
            </div>
        </section>

        <section id="portfolio" class="portfolio">
            <h2 class="section-title">Our Portfolio</h2>
            <div class="portfolio-grid">
                <div class="portfolio-item">
                    <img src="project1.jpg" alt="Project 1">
                    <h3>E-commerce Website</h3>
                    <p>Complete online store solution</p>
                </div>
                <div class="portfolio-item">
                    <img src="project2.jpg" alt="Project 2">
                    <h3>Mobile Banking App</h3>
                    <p>Secure banking application</p>
                </div>
                <div class="portfolio-item">
                    <img src="project3.jpg" alt="Project 3">
                    <h3>Corporate Website</h3>
                    <p>Business presentation website</p>
                </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <h2 class="section-title">Contact Us</h2>
            <form class="contact-form">
                <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="message">Message:</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>
                <button type="submit" class="btn">Send Message</button>
            </form>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>About Company</h3>
                <p>We are a team of professionals dedicated to delivering quality services.</p>
            </div>
            <div class="footer-section">
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Contact Info</h3>
                <p>Email: info@company.com</p>
                <p>Phone: +1 234 567 890</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 Company Name. All Rights Reserved.</p>
        </div>
    </footer>
</body>
</html>
4. CSS 

     
    CSS
    Tap 2x to all select
    



/* Product card */
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-body {
  padding: 15px;
}

.card-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.card-text {
  color: #666;
  margin-bottom: 15px;
}

.card-price {
  font-weight: bold;
  color: #e74c3c;
  font-size: 1.3rem;
}

.btn {
  display: inline-block;
  background: #3498db;
  color: white;
  padding: 8px 15px;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 10px;
}

.btn:hover {
  background: #2980b9;
}
5. JAVASCRIPT 

     
    JAVASCRIPT
    Tap 2x to all select
    



/* SYNTAX KALKULATOR SEDERHANA */

class Calculator {
    constructor() {
        this.currentInput = '0';
        this.previousInput = null;
        this.operation = null;
        this.updateDisplay();
        this.setupEventListeners();
    }
    
    updateDisplay() {
        document.getElementById('display').value = this.currentInput;
    }
    
    setupEventListeners() {
        const buttons = document.querySelectorAll('.btn');
        buttons.forEach(button => {
            button.addEventListener('click', () => {
                const value = button.textContent;
                
                if (!isNaN(value) || value === '.') {
                    this.handleNumberInput(value);
                } else if (['+', '-', '*', '/'].includes(value)) {
                    this.handleOperator(value);
                } else if (value === '=') {
                    this.calculate();
                } else if (value === 'C') {
                    this.clear();
                }
                
                this.updateDisplay();
            });
        });
    }
    
    handleNumberInput(number) {
        if (this.currentInput === '0') {
            this.currentInput = number;
        } else {
            this.currentInput += number;
        }
    }
    
    handleOperator(op) {
        if (this.currentInput === '0') return;
        
        if (this.previousInput !== null) {
            this.calculate();
        }
        
        this.operation = op;
        this.previousInput = this.currentInput;
        this.currentInput = '0';
    }
    
    calculate() {
        let result;
        const prev = parseFloat(this.previousInput);
        const current = parseFloat(this.currentInput);
        
        switch (this.operation) {
            case '+': result = prev + current; break;
            case '-': result = prev - current; break;
            case '*': result = prev * current; break;
            case '/': result = prev / current; break;
            default: return;
        }
        
        this.currentInput = result.toString();
        this.operation = null;
        this.previousInput = null;
    }
    
    clear() {
        this.currentInput = '0';
        this.previousInput = null;
        this.operation = null;
    }
}

// Inisialisasi kalkulator
new Calculator();
6. JQUERY 

     
    JQUERY
    Tap 2x to all select
    



// GET request
$.get('https://api.example.com/data', function(response) {
    console.log('Data diterima:', response);
});

// POST request
$.post('https://api.example.com/save', { name: 'John', age: 30 }, function(response) {
    $('#hasil').text(response.message);
});

// AJAX lengkap
$.ajax({
    url: 'https://api.example.com/users',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        $.each(data, function(index, user) {
            $('#daftar-user').append('<li>' + user.name + '</li>');
        });
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});

Posting Komentar